@scouterna/ui-webc 2.2.5 → 2.2.7

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

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

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

@@ -15,8 +15,10 @@
   cursor: pointer;
 }
 
-.button:hover {
-  background-color: var(--color-neutral-50);
+@media (hover: hover) {
+  .button:hover {
+    background-color: var(--color-neutral-50);
+  }
 }
 
 .button.active {

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

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

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

@@ -1,16 +1,21 @@
 scout-button {
   display: inline-block;
   height: var(--spacing-10);
+  font: var(--type-body-base);
 }
+scout-button[data-size="large"] {
+    height: var(--spacing-12);
+    font: var(--type-body-lg);
+  }
 scout-button .button {
     flex: 1;
     display: inline-flex;
+    width: 100%;
     height: 100%;
     align-items: center;
     justify-content: center;
     gap: var(--spacing-3);
     padding: 0 var(--spacing-4);
-    font: var(--type-body-base);
     border-radius: var(--spacing-2);
     border: 1px solid transparent;
     cursor: pointer;
@@ -18,6 +23,9 @@ scout-button .button {
     text-decoration: none;
     box-sizing: border-box;
   }
+scout-button[data-size="large"] .button {
+    padding: 0 var(--spacing-5);
+  }
 scout-button .icon {
     width: var(--spacing-5);
     height: var(--spacing-5);
@@ -27,15 +35,15 @@ scout-button .icon svg {
     width: 100%;
     height: 100%;
   }
-scout-button.icon-only .button {
+scout-button[data-icon-only] .button {
     aspect-ratio: 1 / 1;
     justify-content: center;
     padding: 0;
   }
-scout-button.icon-only .icon {
+scout-button[data-icon-only] .icon {
     margin: 0;
   }
-scout-button.icon-only .content {
+scout-button[data-icon-only] .content {
     /* Visually hidden: https://www.a11yproject.com/posts/how-to-hide-content/ */
     clip: rect(0 0 0 0);
     clip-path: inset(50%);
@@ -49,8 +57,10 @@ scout-button .button.primary {
     background-color: var(--color-background-brand-base);
     color: var(--color-text-brand-inverse);
   }
-scout-button .button.primary:hover {
-      background-color: var(--color-background-brand-hovered);
+@media (hover: hover) {
+      scout-button .button.primary:hover {
+        background-color: var(--color-background-brand-hovered);
+      }
     }
 scout-button .button.primary:active {
       background-color: var(--color-background-brand-pressed);
@@ -60,8 +70,10 @@ scout-button .button.outlined {
     border-color: var(--color-background-brand-subtle-base);
     color: var(--color-text-brand-base);
   }
-scout-button .button.outlined:hover {
-      background-color: var(--color-background-brand-subtle-hovered);
+@media (hover: hover) {
+      scout-button .button.outlined:hover {
+        background-color: var(--color-background-brand-subtle-hovered);
+      }
     }
 scout-button .button.outlined:active {
       background-color: var(--color-background-brand-subtle-pressed);
@@ -71,8 +83,10 @@ scout-button .button.text {
     border-color: transparent;
     color: var(--color-text-brand-base);
   }
-scout-button .button.text:hover {
-      background-color: var(--color-background-brand-subtle-hovered);
+@media (hover: hover) {
+      scout-button .button.text:hover {
+        background-color: var(--color-background-brand-subtle-hovered);
+      }
     }
 scout-button .button.text:active {
       background-color: var(--color-background-brand-subtle-pressed);
@@ -81,8 +95,10 @@ scout-button .button.caution {
     background-color: var(--color-background-caution-bold-base);
     color: var(--color-text-caution-bold-base);
   }
-scout-button .button.caution:hover {
-      background-color: var(--color-background-caution-bold-hovered);
+@media (hover: hover) {
+      scout-button .button.caution:hover {
+        background-color: var(--color-background-caution-bold-hovered);
+      }
     }
 scout-button .button.caution:active {
       background-color: var(--color-background-caution-bold-pressed);
@@ -91,8 +107,10 @@ scout-button .button.danger {
     background-color: var(--color-background-danger-bold-base);
     color: var(--color-text-danger-bold-base);
   }
-scout-button .button.danger:hover {
-      background-color: var(--color-background-danger-bold-hovered);
+@media (hover: hover) {
+      scout-button .button.danger:hover {
+        background-color: var(--color-background-danger-bold-hovered);
+      }
     }
 scout-button .button.danger:active {
       background-color: var(--color-background-danger-bold-pressed);

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

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

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

@@ -20,4 +20,3 @@ export class ScoutCard {
         };
     }
 }
-//# sourceMappingURL=card.js.map

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

@@ -13,20 +13,25 @@
   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;
+@media (hover: hover) {
+  .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-color: var(--color-background-brand-hovered);
-  box-shadow: none;
+@media (hover: hover) {
+  .checkbox:checked:hover {
+    background-color: var(--color-background-brand-hovered);
+    border-color: var(--color-background-brand-hovered);
+    box-shadow: none;
+  }
 }
 
 .checkbox:checked {

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

@@ -191,4 +191,3 @@ export class ScoutCheckbox extends Mixin(inputMixin) {
             }];
     }
 }
-//# sourceMappingURL=checkbox.js.map

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

@@ -17,4 +17,3 @@ export class ScoutDivider {
         };
     }
 }
-//# sourceMappingURL=divider.js.map

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

@@ -127,4 +127,3 @@ export class ScoutField {
             }];
     }
 }
-//# sourceMappingURL=field.js.map

package/dist/collection/components/input/input.js

@@ -54,7 +54,7 @@ export class ScoutInput extends Mixin(inputMixin) {
     render() {
         const sizeClass = this.size === "large" ? "large" : "";
         const variantClass = this.variant === "elevated" ? "elevated" : "";
-        return (h(Host, { key: '769603f718f511a0a2202814a7621d60a2a9f34c', class: `${sizeClass} ${variantClass}` }, h("input", { key: '6a4e1ad8173dfe37ce5facf8627990fd797dfc60', ref: (el) => this.setInputRef(el), id: this.ariaId, type: this.type, name: this.name, inputMode: this.inputmode, pattern: this.pattern, class: "input", value: this.value, disabled: this.disabled, placeholder: this.placeholder, onInput: () => this.onInput(), onBlur: () => this.onBlur(), onInvalid: () => this.onInvalid() })));
+        return (h(Host, { key: '800efa151d522ef1d7a483128baa6c0958dcd100', class: `${sizeClass} ${variantClass}` }, h("input", { key: '92756a5cdf529455fffaadcbcdd2bc36a5087c65', ref: (el) => this.setInputRef(el), id: this.ariaId, type: this.type, name: this.name, inputMode: this.inputmode, pattern: this.pattern, class: "input", value: this.value, disabled: this.disabled, placeholder: this.placeholder, onInput: () => this.onInput(), onBlur: () => this.onBlur(), onInvalid: () => this.onInvalid() })));
     }
     static get is() { return "scout-input"; }
     static get encapsulation() { return "scoped"; }
@@ -74,9 +74,15 @@ export class ScoutInput extends Mixin(inputMixin) {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "\"medium\" | \"large\"",
+                    "original": "Size",
                     "resolved": "\"large\" | \"medium\"",
-                    "references": {}
+                    "references": {
+                        "Size": {
+                            "location": "local",
+                            "path": "/home/runner/work/j26-components/j26-components/packages/ui-webc/src/components/input/input.tsx",
+                            "id": "src/components/input/input.tsx::Size"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -94,9 +100,15 @@ export class ScoutInput extends Mixin(inputMixin) {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "\"default\" | \"elevated\"",
+                    "original": "Variant",
                     "resolved": "\"default\" | \"elevated\"",
-                    "references": {}
+                    "references": {
+                        "Variant": {
+                            "location": "local",
+                            "path": "/home/runner/work/j26-components/j26-components/packages/ui-webc/src/components/input/input.tsx",
+                            "id": "src/components/input/input.tsx::Variant"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -261,4 +273,3 @@ export class ScoutInput extends Mixin(inputMixin) {
         };
     }
 }
-//# sourceMappingURL=input.js.map

package/dist/collection/components/link/link.css

@@ -9,11 +9,13 @@ button {
   text-decoration: none;
 }
 
-a:hover,
-button:hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-  color: var(--color-background-brand-hover);
+@media (hover: hover) {
+  a:hover,
+  button:hover {
+    -webkit-text-decoration: underline;
+    text-decoration: underline;
+    color: var(--color-background-brand-hover);
+  }
 }
 
 a:active,

package/dist/collection/components/link/link.js

@@ -204,4 +204,3 @@ export class ScoutLink {
             }];
     }
 }
-//# sourceMappingURL=link.js.map

package/dist/collection/components/list-view/list-view.js

@@ -47,4 +47,3 @@ export class ScoutListView {
             }];
     }
 }
-//# sourceMappingURL=list-view.js.map

package/dist/collection/components/list-view-item/list-view-item.css

@@ -17,8 +17,10 @@
   text-decoration: none;
 }
 
-.button:hover {
-  background-color: var(--color-background-brand-subtle-hovered);
+@media (hover: hover) {
+  .button:hover {
+    background-color: var(--color-background-brand-subtle-hovered);
+  }
 }
 
 .prefix-icon,

package/dist/collection/components/list-view-item/list-view-item.js

@@ -299,4 +299,3 @@ export class ScoutListViewItem {
             }];
     }
 }
-//# sourceMappingURL=list-view-item.js.map

package/dist/collection/components/list-view-subheader/list-view-subheader.js

@@ -62,4 +62,3 @@ export class ScoutListViewSubheader {
         };
     }
 }
-//# sourceMappingURL=list-view-subheader.js.map

package/dist/collection/components/loader/loader.js

@@ -108,4 +108,3 @@ export class ScoutLoader {
         };
     }
 }
-//# sourceMappingURL=loader.js.map

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

@@ -13,23 +13,28 @@
   position: relative;
 }
 
-.radio:hover {
-  border: 2px solid var(--color-gray-400);
-  box-shadow: inset 0px 0px 5px 5px var(--color-background-brand-subtle-hovered);
-  cursor: pointer;
+@media (hover: hover) {
+  .radio:hover {
+    border: 2px solid var(--color-gray-400);
+    box-shadow: inset 0px 0px 5px 5px
+      var(--color-background-brand-subtle-hovered);
+    cursor: pointer;
+  }
 }
 
 .radio:active {
   background-color: var(--color-background-brand-subtle-pressed);
 }
 
-.radio:checked:hover {
-  border-color: var(--color-background-brand-hovered);
-  box-shadow: none;
-}
+@media (hover: hover) {
+  .radio:checked:hover {
+    border-color: var(--color-background-brand-hovered);
+    box-shadow: none;
+  }
 
-.radio:checked:hover::before {
-  background-color: var(--color-background-brand-hovered);
+  .radio:checked:hover::before {
+    background-color: var(--color-background-brand-hovered);
+  }
 }
 
 .radio:checked {

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

@@ -189,4 +189,3 @@ export class ScoutRadioButton extends Mixin(inputMixin) {
             }];
     }
 }
-//# sourceMappingURL=radio-button.js.map

package/dist/collection/components/select/select.css

@@ -20,8 +20,10 @@
   cursor: pointer;
 }
 
-.select:hover:not(:disabled) {
-  border-color: var(--color-gray-400);
+@media (hover: hover) {
+  .select:hover:not(:disabled) {
+    border-color: var(--color-gray-400);
+  }
 }
 
 .select:focus {

package/dist/collection/components/select/select.js

@@ -99,4 +99,3 @@ export class ScoutSelect extends Mixin(inputMixin) {
         };
     }
 }
-//# sourceMappingURL=select.js.map

package/dist/collection/components/stack/stack.js

@@ -93,4 +93,3 @@ export class ScoutStack {
         };
     }
 }
-//# sourceMappingURL=stack.js.map

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

@@ -19,10 +19,12 @@
   --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);
+@media (hover: hover) {
+  .switch:hover {
+    transition-property: none;
+    border-color: var(--color-gray-400);
+    background-color: var(--color-background-brand-subtle-hovered);
+  }
 }
 
 .switch:active {
@@ -33,8 +35,10 @@
   border-color: var(--color-background-brand-base);
 }
 
-.switch:hover::before {
-  background-color: var(--color-gray-400);
+@media (hover: hover) {
+  .switch:hover::before {
+    background-color: var(--color-gray-400);
+  }
 }
 
 .switch::before {

package/dist/collection/components/switch/switch.js

@@ -153,4 +153,3 @@ export class ScoutSwitch extends Mixin(inputMixin) {
             }];
     }
 }
-//# sourceMappingURL=switch.js.map

package/dist/collection/index.js

@@ -8,4 +8,3 @@
  * to consume components of this package as outlined in the `README.md`.
  */
 export { format } from "./utils/utils";
-//# sourceMappingURL=index.js.map

package/dist/collection/mixins/inputMixin.js

@@ -173,4 +173,3 @@ export const inputMixin = (Base) => {
     }
     return InputMixin;
 };
-//# sourceMappingURL=inputMixin.js.map

package/dist/collection/utils/utils.js

@@ -1,4 +1,3 @@
 export function format(first, middle, last) {
     return ((first || "") + (middle ? ` ${middle}` : "") + (last ? ` ${last}` : ""));
 }
-//# sourceMappingURL=utils.js.map

package/dist/components/index.d.ts

@@ -31,3 +31,5 @@ export interface SetPlatformOptions {
   rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
 }
 export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
+
+export * from '../types';

package/dist/components/index.js

@@ -1,10 +1 @@
-export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-fr5CaUFu.js';
-
-function format(first, middle, last) {
-    return ((first || "") + (middle ? ` ${middle}` : "") + (last ? ` ${last}` : ""));
-}
-
-export { format };
-//# sourceMappingURL=index.js.map
-
-//# sourceMappingURL=index.js.map
+export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-CmHrcz9s.js";function t(s,t,e){return(s||"")+(t?" "+t:"")+(e?" "+e:"")}export{t as format}

package/dist/components/p-CTivgs5a.js

@@ -0,0 +1 @@
+const t=t=>class extends t{constructor(){super()}validate;scoutInputChange;scoutBlur;_scoutValidate;_scoutInvalid;_scoutFieldId;ariaId;inputElement;componentWillLoad(){this.ariaId=`_${Math.random().toString(36).substring(2,9)}`,this._scoutFieldId.emit(this.ariaId)}componentDidLoad(){this.runValidation()}onInput(){this.runValidation(),this.scoutInputChange.emit({value:this.inputElement.value,element:this.inputElement})}onBlur(){this.scoutBlur.emit()}onInvalid(){this._scoutInvalid.emit()}runValidation(){if(!this.validate)return;const t=this.validate(this.inputElement.value);this.inputElement.setCustomValidity(t??""),this._scoutValidate.emit({element:this.inputElement})}setInputRef(t){this.inputElement=t}};export{t as i}