@scouterna/ui-webc 1.0.0 → 2.0.0

package/dist/cjs/loader.cjs.js

@@ -5,7 +5,7 @@ var index = require('./index-D42maJcS.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await index.globalScripts();
-  return index.bootstrapLazy([["scout-bottom-bar.cjs",[[273,"scout-bottom-bar"]]],["scout-bottom-bar-item.cjs",[[273,"scout-bottom-bar-item",{"type":[1],"href":[1],"icon":[1],"label":[1],"active":[4]}]]],["scout-button.cjs",[[273,"scout-button",{"type":[1],"variant":[1],"icon":[1]}]]],["scout-card.cjs",[[273,"scout-card"]]],["scout-field.cjs",[[262,"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",[[258,"scout-input",{"type":[1],"inputmode":[1],"pattern":[1],"value":[1],"disabled":[4],"validate":[16],"ariaId":[32]}]]]], options);
+  return index.bootstrapLazy([["scout-bottom-bar.cjs",[[273,"scout-bottom-bar"]]],["scout-bottom-bar-item.cjs",[[273,"scout-bottom-bar-item",{"type":[1],"href":[1],"icon":[1],"label":[1],"active":[4]}]]],["scout-button.cjs",[[273,"scout-button",{"type":[1],"variant":[1],"icon":[1]}]]],["scout-card.cjs",[[273,"scout-card"]]],["scout-checkbox.cjs",[[258,"scout-checkbox",{"checked":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"ariaId":[32]}]]],["scout-field.cjs",[[262,"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",[[258,"scout-input",{"type":[1],"inputmode":[1],"pattern":[1],"value":[1],"disabled":[4],"validate":[16],"ariaId":[32]}]]],["scout-switch.cjs",[[273,"scout-switch",{"toggled":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"ariaId":[32]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -0,0 +1,53 @@
+'use strict';
+
+var index = require('./index-D42maJcS.js');
+
+const checkSvg = 'data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCiAgY2xhc3M9Imljb24gaWNvbi10YWJsZXIgaWNvbnMtdGFibGVyLW91dGxpbmUgaWNvbi10YWJsZXItY2hlY2siCj4KICA8cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICA8cGF0aCBkPSJNNSAxMmw1IDVsMTAgLTEwIiAvPgo8L3N2Zz4=';
+
+const checkboxCss = ".checkbox.sc-scout-checkbox{width:var(--spacing-6);height:var(--spacing-6);-moz-appearance:none;appearance:none;-webkit-appearance:none;display:flex;align-content:center;justify-content:center;border-radius:3px;background-color:var(--color-text-brand-inverse);border:2px solid var(--color-gray-300);position:relative}.checkbox.sc-scout-checkbox:hover{border:2px solid var(--color-gray-400);box-shadow:inset 0px 0px 5px 5px var(--color-background-brand-subtle-hovered);cursor:pointer}.checkbox.sc-scout-checkbox:active{background-color:var(--color-background-brand-subtle-pressed)}.checkbox.sc-scout-checkbox:checked:hover{background-color:var(--color-background-brand-hovered);border:2px solid var(--color-background-brand-hovered);box-shadow:none}.checkbox.sc-scout-checkbox:checked{background-color:var(--color-background-brand-base);border-color:var(--color-background-brand-base)}.checkbox.sc-scout-checkbox::after{content:\"\";position:absolute;width:var(--spacing-10);height:var(--spacing-10);top:50%;left:50%;transform:translate(-50%, -50%)}.checkbox.sc-scout-checkbox:checked::before{content:\"\";background-color:var(--color-text-brand-inverse);width:var(--spacing-6);height:var(--spacing-6);position:absolute;top:50%;left:50%;right:0;bottom:0;transform:translate(-50%, -50%);-webkit-mask-image:var(--icon-checkbox);mask-image:var(--icon-checkbox);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.checkbox.sc-scout-checkbox:disabled{pointer-events:none;background-color:var(--color-gray-100);border-color:var(--color-gray-100)}label.sc-scout-checkbox{display:flex;flex-direction:row-reverse;align-items:center;font:var(--type-label-base);color:var(--color-text-base)}.inlineDivider.sc-scout-checkbox{width:var(--spacing-2)}";
+
+const ScoutCheckbox = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.scoutCheckboxChecked = index.createEvent(this, "scoutCheckboxChecked");
+        this._fieldId = index.createEvent(this, "_fieldId");
+    }
+    checked = false;
+    disabled = false;
+    /**
+     * Use this prop if you need to connect your checkbox with another element describing its use, other than the property label.
+     */
+    ariaLabelledby;
+    label;
+    ariaId;
+    scoutCheckboxChecked;
+    /**
+     * 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 checkbox = event.target;
+        console.log("checkbox", checkbox.checked);
+        this.scoutCheckboxChecked.emit({
+            checked: checkbox.checked,
+            element: checkbox,
+        });
+    }
+    /*
+    todo:
+    - Wrap checkbox with label if used.
+    - make sure it works with field nicely with label.
+    */
+    render() {
+        const Tag = this.label && this.label.length ? "label" : "div";
+        return (index.h(Tag, { key: '2d97627d29b09521936eeef81419673d70fc75f1' }, this.label, index.h("span", { key: 'f62b4e360f03b4b6fb6e8fee326756552a5a631d', class: "inlineDivider" }), index.h("input", { key: '7ca6b74e12c369fc937d1b8c85e70c52fd9aa25c', class: "checkbox", onChange: (event) => this.onClick(event), style: { "--icon-checkbox": `url(${checkSvg})` }, type: "checkbox", id: this.ariaId, "aria-labelledby": this.ariaLabelledby, "aria-disabled": this.disabled, disabled: this.disabled, checked: this.checked })));
+    }
+};
+ScoutCheckbox.style = checkboxCss;
+
+exports.scout_checkbox = ScoutCheckbox;
+//# sourceMappingURL=scout-checkbox.entry.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scout-checkbox.entry.cjs.js","sources":["../../node_modules/.pnpm/@tabler+icons@3.35.0/node_modules/@tabler/icons/icons/outline/check.svg","src/components/checkbox/checkbox.css?tag=scout-checkbox&encapsulation=scoped","src/components/checkbox/checkbox.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-check\"\n>\n  <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n  <path d=\"M5 12l5 5l10 -10\" />\n</svg>",".checkbox {\n  width: var(--spacing-6);\n  height: var(--spacing-6);\n  appearance: none;\n  -webkit-appearance: none;\n  display: flex;\n  align-content: center;\n  justify-content: center;\n  border-radius: 3px;\n  background-color: var(--color-text-brand-inverse);\n  border: 2px solid var(--color-gray-300);\n  position: relative;\n}\n\n.checkbox:hover {\n  border: 2px solid var(--color-gray-400);\n  box-shadow: inset 0px 0px 5px 5px var(--color-background-brand-subtle-hovered);\n  cursor: pointer;\n}\n\n.checkbox:active {\n  background-color: var(--color-background-brand-subtle-pressed);\n}\n\n.checkbox:checked:hover {\n  background-color: var(--color-background-brand-hovered);\n  border: 2px solid var(--color-background-brand-hovered);\n  box-shadow: none;\n}\n\n.checkbox:checked {\n  background-color: var(--color-background-brand-base);\n  border-color: var(--color-background-brand-base);\n}\n\n.checkbox::after {\n  content: \"\";\n  position: absolute;\n  width: var(--spacing-10);\n  height: var(--spacing-10);\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.checkbox:checked::before {\n  content: \"\";\n  background-color: var(--color-text-brand-inverse);\n  width: var(--spacing-6);\n  height: var(--spacing-6);\n  position: absolute;\n  /* Needed because of the border */\n  top: 50%;\n  left: 50%;\n  right: 0;\n  bottom: 0;\n  transform: translate(-50%, -50%);\n  mask-image: var(--icon-checkbox);\n  mask-repeat: no-repeat;\n}\n\n.checkbox:disabled {\n  pointer-events: none;\n  background-color: var(--color-gray-100);\n  border-color: var(--color-gray-100);\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\";\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  @State() ariaId: string;\n\n  @Event() scoutCheckboxChecked: 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  onClick(event: Event) {\n    const checkbox = event.target as HTMLInputElement;\n    console.log(\"checkbox\", checkbox.checked);\n\n    this.scoutCheckboxChecked.emit({\n      checked: checkbox.checked,\n      element: checkbox,\n    });\n  }\n  /*\n  todo:\n  - Wrap checkbox with label if used.\n  - make sure it works with field nicely with label.\n  */\n\n  render() {\n    const Tag = this.label && this.label.length ? \"label\" : \"div\";\n    return (\n      <Tag>\n        {this.label}\n        <span class=\"inlineDivider\"></span>\n        <input\n          class=\"checkbox\"\n          onChange={(event) => this.onClick(event)}\n          style={{ \"--icon-checkbox\": `url(${checkIcon})` }}\n          type=\"checkbox\"\n          id={this.ariaId}\n          aria-labelledby={this.ariaLabelledby}\n          aria-disabled={this.disabled}\n          disabled={this.disabled}\n          checked={this.checked}\n        />\n      </Tag>\n    );\n  }\n}\n"],"names":["h","checkIcon"],"mappings":";;;;AAAA,MAAM,QAAQ,GAAG,4fAA4f;;ACA7gB,MAAM,WAAW,GAAG,0sDAA0sD;;MCejtD,aAAa,GAAA,MAAA;;;;;;IAChB,OAAO,GAAY,KAAK;IAExB,QAAQ,GAAY,KAAK;AAEjC;;AAEG;AACK,IAAA,cAAc;AAEd,IAAA,KAAK;AAEJ,IAAA,MAAM;AAEN,IAAA,oBAAoB;AAI7B;;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,QAAQ,GAAG,KAAK,CAAC,MAA0B;QACjD,OAAO,CAAC,GAAG,CAAC,UAAU,EAAE,QAAQ,CAAC,OAAO,CAAC;AAEzC,QAAA,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC;YAC7B,OAAO,EAAE,QAAQ,CAAC,OAAO;AACzB,YAAA,OAAO,EAAE,QAAQ;AAClB,SAAA,CAAC;;AAEJ;;;;AAIE;IAEF,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,OAAO,GAAG,KAAK;QAC7D,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,OAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,UAAU,EAChB,QAAQ,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,EACxC,KAAK,EAAE,EAAE,iBAAiB,EAAE,CAAA,IAAA,EAAOC,QAAS,CAAA,CAAA,CAAG,EAAE,EACjD,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,MAAM,EAAA,iBAAA,EACE,IAAI,CAAC,cAAc,EAAA,eAAA,EACrB,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EAAA,CACrB,CACE;;;;;;;","x_google_ignoreList":[0]}

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

@@ -38,7 +38,7 @@ const ScoutField = class {
         this.errorHidden = false;
     }
     render() {
-        return (index.h("div", { key: 'bcd308f7ff69063860281b7f4f48ef2baa608308', class: "field" }, index.h("label", { key: '756d4a97399ed94970b3d39850dd5c4d0e155a99', htmlFor: this.inputId, class: "label" }, this.label), index.h("slot", { key: '3700f8aba58c90b14224e0d35a147f1a11ba7f98' }), index.h("p", { key: '60a70a27e3b7811accc657bbe49405306d342d9d', class: "error-text", "aria-live": "polite" }, !this.errorHidden && this.errorText), this.helpText && index.h("p", { key: '44f8377005f43ca1a332d6c4d8aec48e5aafb3c4', class: "help-text" }, this.helpText)));
+        return (index.h("div", { key: '0ba5919cf10618bf4617e1ced85485a6d136f668', class: "field" }, index.h("label", { key: '55cac1b4eb9c0d58ea1e4045b9c85c30a384d99b', htmlFor: this.inputId, class: "label" }, this.label), index.h("slot", { key: 'b5931e88ad82e693ff1dc24acd99db393f048fab' }), index.h("p", { key: '6354b6187ba63158bdd5c784787f1612eb641db4', class: "error-text", "aria-live": "polite" }, !this.errorHidden && this.errorText), this.helpText && index.h("p", { key: 'ba9e47977b682fbe28afd61c6a00832506860e56', class: "help-text" }, this.helpText)));
     }
 };
 ScoutField.style = fieldCss;

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

@@ -0,0 +1,49 @@
+'use strict';
+
+var index = require('./index-D42maJcS.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 ScoutSwitch = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.scoutSwitchToggled = index.createEvent(this, "scoutSwitchToggled");
+        this._fieldId = index.createEvent(this, "_fieldId");
+    }
+    /**
+     * Indicates whether the switch is toggled on or off.
+     */
+    toggled = false;
+    disabled = false;
+    /**
+     * Use this prop if you need to connect your switch with another element describing its use, other than the property label.
+     */
+    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,
+        });
+    }
+    render() {
+        const Tag = this.label && this.label.length ? "label" : "div";
+        return (index.h(Tag, { key: '06f33e80dedee05abc34f15fbd8453f3df50d760' }, this.label, index.h("span", { key: '3061c223b64f313d4ebcd4b068ca84d83c5bb9c2', class: "inlineDivider" }), index.h("input", { key: '66a3a848ce3aa484af9bb13eda6cc30e46e74c1d', 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 })));
+    }
+    static get delegatesFocus() { return true; }
+};
+ScoutSwitch.style = switchCss;
+
+exports.scout_switch = ScoutSwitch;
+//# sourceMappingURL=scout-switch.entry.cjs.js.map

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

@@ -0,0 +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 && 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,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,OAAO,GAAG,KAAK;QAC7D,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;;;;;;;;"}

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

@@ -18,7 +18,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await index.globalScripts();
-  return index.bootstrapLazy([["scout-bottom-bar.cjs",[[273,"scout-bottom-bar"]]],["scout-bottom-bar-item.cjs",[[273,"scout-bottom-bar-item",{"type":[1],"href":[1],"icon":[1],"label":[1],"active":[4]}]]],["scout-button.cjs",[[273,"scout-button",{"type":[1],"variant":[1],"icon":[1]}]]],["scout-card.cjs",[[273,"scout-card"]]],["scout-field.cjs",[[262,"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",[[258,"scout-input",{"type":[1],"inputmode":[1],"pattern":[1],"value":[1],"disabled":[4],"validate":[16],"ariaId":[32]}]]]], options);
+  return index.bootstrapLazy([["scout-bottom-bar.cjs",[[273,"scout-bottom-bar"]]],["scout-bottom-bar-item.cjs",[[273,"scout-bottom-bar-item",{"type":[1],"href":[1],"icon":[1],"label":[1],"active":[4]}]]],["scout-button.cjs",[[273,"scout-button",{"type":[1],"variant":[1],"icon":[1]}]]],["scout-card.cjs",[[273,"scout-card"]]],["scout-checkbox.cjs",[[258,"scout-checkbox",{"checked":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"ariaId":[32]}]]],["scout-field.cjs",[[262,"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",[[258,"scout-input",{"type":[1],"inputmode":[1],"pattern":[1],"value":[1],"disabled":[4],"validate":[16],"ariaId":[32]}]]],["scout-switch.cjs",[[273,"scout-switch",{"toggled":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"ariaId":[32]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -5,7 +5,9 @@
     "components/input/input.js",
     "components/bottom-bar/bottom-bar.js",
     "components/card/card.js",
-    "components/field/field.js"
+    "components/checkbox/checkbox.js",
+    "components/field/field.js",
+    "components/switch/switch.js"
   ],
   "compiler": {
     "name": "@stencil/core",

package/dist/collection/components/checkbox/checkbox.css

@@ -0,0 +1,81 @@
+.checkbox {
+  width: var(--spacing-6);
+  height: var(--spacing-6);
+  -moz-appearance: none;
+       appearance: none;
+  -webkit-appearance: none;
+  display: flex;
+  align-content: center;
+  justify-content: center;
+  border-radius: 3px;
+  background-color: var(--color-text-brand-inverse);
+  border: 2px solid var(--color-gray-300);
+  position: relative;
+}
+
+.checkbox:hover {
+  border: 2px solid var(--color-gray-400);
+  box-shadow: inset 0px 0px 5px 5px var(--color-background-brand-subtle-hovered);
+  cursor: pointer;
+}
+
+.checkbox:active {
+  background-color: var(--color-background-brand-subtle-pressed);
+}
+
+.checkbox:checked:hover {
+  background-color: var(--color-background-brand-hovered);
+  border: 2px solid var(--color-background-brand-hovered);
+  box-shadow: none;
+}
+
+.checkbox:checked {
+  background-color: var(--color-background-brand-base);
+  border-color: var(--color-background-brand-base);
+}
+
+.checkbox::after {
+  content: "";
+  position: absolute;
+  width: var(--spacing-10);
+  height: var(--spacing-10);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.checkbox:checked::before {
+  content: "";
+  background-color: var(--color-text-brand-inverse);
+  width: var(--spacing-6);
+  height: var(--spacing-6);
+  position: absolute;
+  /* Needed because of the border */
+  top: 50%;
+  left: 50%;
+  right: 0;
+  bottom: 0;
+  transform: translate(-50%, -50%);
+  -webkit-mask-image: var(--icon-checkbox);
+          mask-image: var(--icon-checkbox);
+  -webkit-mask-repeat: no-repeat;
+          mask-repeat: no-repeat;
+}
+
+.checkbox:disabled {
+  pointer-events: none;
+  background-color: var(--color-gray-100);
+  border-color: var(--color-gray-100);
+}
+
+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);
+}

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

@@ -0,0 +1,176 @@
+import { h, } from "@stencil/core";
+import checkIcon from "@tabler/icons/outline/check.svg";
+export class ScoutCheckbox {
+    checked = false;
+    disabled = false;
+    /**
+     * Use this prop if you need to connect your checkbox with another element describing its use, other than the property label.
+     */
+    ariaLabelledby;
+    label;
+    ariaId;
+    scoutCheckboxChecked;
+    /**
+     * 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 checkbox = event.target;
+        console.log("checkbox", checkbox.checked);
+        this.scoutCheckboxChecked.emit({
+            checked: checkbox.checked,
+            element: checkbox,
+        });
+    }
+    /*
+    todo:
+    - Wrap checkbox with label if used.
+    - make sure it works with field nicely with label.
+    */
+    render() {
+        const Tag = this.label && this.label.length ? "label" : "div";
+        return (h(Tag, { key: '2d97627d29b09521936eeef81419673d70fc75f1' }, this.label, h("span", { key: 'f62b4e360f03b4b6fb6e8fee326756552a5a631d', class: "inlineDivider" }), h("input", { key: '7ca6b74e12c369fc937d1b8c85e70c52fd9aa25c', class: "checkbox", onChange: (event) => this.onClick(event), style: { "--icon-checkbox": `url(${checkIcon})` }, type: "checkbox", id: this.ariaId, "aria-labelledby": this.ariaLabelledby, "aria-disabled": this.disabled, disabled: this.disabled, checked: this.checked })));
+    }
+    static get is() { return "scout-checkbox"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["checkbox.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["checkbox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "checked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "ariaLabelledby": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use this prop if you need to connect your checkbox with another element describing its use, other than the property label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-labelledby"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "ariaId": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "scoutCheckboxChecked",
+                "name": "scoutCheckboxChecked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{\n    checked: boolean;\n    element: HTMLInputElement;\n  }",
+                    "resolved": "{ checked: boolean; element: HTMLInputElement; }",
+                    "references": {
+                        "HTMLInputElement": {
+                            "location": "global",
+                            "id": "global::HTMLInputElement"
+                        }
+                    }
+                }
+            }, {
+                "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": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=checkbox.js.map

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

@@ -0,0 +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;IAEb,MAAM,CAAS;IAEf,oBAAoB,CAG1B;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,OAAO,CAAC,KAAY;QAClB,MAAM,QAAQ,GAAG,KAAK,CAAC,MAA0B,CAAC;QAClD,OAAO,CAAC,GAAG,CAAC,UAAU,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;QAE1C,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC;YAC7B,OAAO,EAAE,QAAQ,CAAC,OAAO;YACzB,OAAO,EAAE,QAAQ;SAClB,CAAC,CAAC;IACL,CAAC;IACD;;;;MAIE;IAEF,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;QAC9D,OAAO,CACL,EAAC,GAAG;YACD,IAAI,CAAC,KAAK;YACX,6DAAM,KAAK,EAAC,eAAe,GAAQ;YACnC,8DACE,KAAK,EAAC,UAAU,EAChB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,EACxC,KAAK,EAAE,EAAE,iBAAiB,EAAE,OAAO,SAAS,GAAG,EAAE,EACjD,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,MAAM,qBACE,IAAI,CAAC,cAAc,mBACrB,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,GACrB,CACE,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  @State() ariaId: string;\n\n  @Event() scoutCheckboxChecked: 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  onClick(event: Event) {\n    const checkbox = event.target as HTMLInputElement;\n    console.log(\"checkbox\", checkbox.checked);\n\n    this.scoutCheckboxChecked.emit({\n      checked: checkbox.checked,\n      element: checkbox,\n    });\n  }\n  /*\n  todo:\n  - Wrap checkbox with label if used.\n  - make sure it works with field nicely with label.\n  */\n\n  render() {\n    const Tag = this.label && this.label.length ? \"label\" : \"div\";\n    return (\n      <Tag>\n        {this.label}\n        <span class=\"inlineDivider\"></span>\n        <input\n          class=\"checkbox\"\n          onChange={(event) => this.onClick(event)}\n          style={{ \"--icon-checkbox\": `url(${checkIcon})` }}\n          type=\"checkbox\"\n          id={this.ariaId}\n          aria-labelledby={this.ariaLabelledby}\n          aria-disabled={this.disabled}\n          disabled={this.disabled}\n          checked={this.checked}\n        />\n      </Tag>\n    );\n  }\n}\n"]}

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

@@ -30,7 +30,7 @@ export class ScoutField {
         this.errorHidden = false;
     }
     render() {
-        return (h("div", { key: 'bcd308f7ff69063860281b7f4f48ef2baa608308', class: "field" }, h("label", { key: '756d4a97399ed94970b3d39850dd5c4d0e155a99', htmlFor: this.inputId, class: "label" }, this.label), h("slot", { key: '3700f8aba58c90b14224e0d35a147f1a11ba7f98' }), h("p", { key: '60a70a27e3b7811accc657bbe49405306d342d9d', class: "error-text", "aria-live": "polite" }, !this.errorHidden && this.errorText), this.helpText && h("p", { key: '44f8377005f43ca1a332d6c4d8aec48e5aafb3c4', class: "help-text" }, this.helpText)));
+        return (h("div", { key: '0ba5919cf10618bf4617e1ced85485a6d136f668', class: "field" }, h("label", { key: '55cac1b4eb9c0d58ea1e4045b9c85c30a384d99b', htmlFor: this.inputId, class: "label" }, this.label), h("slot", { key: 'b5931e88ad82e693ff1dc24acd99db393f048fab' }), h("p", { key: '6354b6187ba63158bdd5c784787f1612eb641db4', class: "error-text", "aria-live": "polite" }, !this.errorHidden && this.errorText), this.helpText && h("p", { key: 'ba9e47977b682fbe28afd61c6a00832506860e56', class: "help-text" }, this.helpText)));
     }
     static get is() { return "scout-field"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/switch/switch.css

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