@scouterna/ui-webc 3.2.0 → 4.0.1

package/dist/collection/components/drawer/drawer.css

@@ -0,0 +1,157 @@
+.drawer {
+  width: 100%;
+}
+/**
+ * Mobile style
+ */
+.drawer--container {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  height: 90%;
+  width: 100%;
+  transform: translateY(100%);
+  background-color: #fefefe;
+  box-shadow: 0 0 20px 3px var(--color-gray-200);
+  border-top-left-radius: var(--spacing-5);
+  border-top-right-radius: var(--spacing-5);
+  overflow: hidden;
+  margin: 0;
+  z-index: 101;
+}
+@keyframes drawerOpen {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@keyframes drawerClose {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+.open {
+  animation: drawerOpen 0.3s ease-in-out forwards;
+}
+.close {
+  animation: drawerClose 0.3s ease-in-out forwards;
+}
+/**
+ * Desktop style
+ */
+@media screen and (min-width: 901px) {
+  @keyframes drawerOpen {
+    from {
+      transform: translateX(100%);
+    }
+    to {
+      transform: translateX(0);
+    }
+  }
+  @keyframes drawerClose {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(100%);
+    }
+  }
+
+  .drawer--container {
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: auto;
+    left: initial;
+    height: 100%;
+    max-height: 100%;
+    max-width: 90%;
+    min-height: 600px;
+    width: 430px;
+    transform: translateX(100%);
+    border-top-left-radius: var(--spacing-5);
+    border-bottom-left-radius: var(--spacing-5);
+    border-top-right-radius: 0;
+  }
+  .open {
+    animation: drawerOpen 0.3s ease-in-out forwards;
+  }
+  .close {
+    animation: drawerClose 0.3s ease-in-out forwards;
+  }
+}
+/* Backdrop styles */
+.backdrop {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  transition: opacity 0.2s;
+  z-index: 100;
+}
+.backdrop-hidden {
+  opacity: 0;
+}
+.backdrop-visible {
+  opacity: 0.6;
+  pointer-events: all;
+  background-color: var(--color-gray-200);
+}
+/**
+ * Header styles
+ */
+.header--wrapper {
+  display: flex;
+  position: relative;
+  width: 100%;
+  height: var(--spacing-20);
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+.heading {
+  font: var(--type-body-lg);
+  font-weight: 600;
+  color: var(--color-text-base);
+}
+.content--wrapper {
+  padding: 0 var(--spacing-7);
+}
+button {
+  z-index: 2;
+  pointer-events: all;
+  cursor: pointer;
+  background: none;
+  box-shadow: none;
+  position: absolute;
+  border: none;
+  /*top: calc(50% - 24px);*/
+  width: 24px;
+  height: 24px;
+  padding: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.exit-button {
+  right: var(--spacing-3);
+}
+.back-button {
+  left: var(--spacing-3);
+}
+.visually-hidden {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}

package/dist/collection/components/drawer/drawer.js

@@ -0,0 +1,323 @@
+import { h, } from "@stencil/core";
+import focusLock from "dom-focus-lock";
+const backIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-left"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l14 0" /><path d="M5 12l6 6" /><path d="M5 12l6 -6" /></svg>';
+const exitIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-x"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>';
+export class ScoutDrawer {
+    rootElement;
+    /**
+     * Open/close state of the drawer.
+     */
+    open = false;
+    /**
+     * Heading within the sheet.
+     */
+    heading = "";
+    /**
+     * Render back button.
+     */
+    showBackButton = false;
+    /**
+     * Back button label.
+     */
+    backButtonLabel = "";
+    /**
+     * Render exit button.
+     */
+    showExitButton = false;
+    /**
+     * Exit button label.
+     */
+    exitButtonLabel = "";
+    /**
+     * Disable backdrop for the drawer.
+     */
+    disableBackdrop = false;
+    /**
+     * Disable drawer content padding. Use only if you have specific use case and you need to use full width.
+     */
+    disableContentPadding = false;
+    drawerState = "closed";
+    focusedNode = null;
+    componentWillLoad() {
+        this.focusedNode = document.activeElement;
+    }
+    componentDidLoad() {
+        if (this.open) {
+            this.setDrawerOpenState(true);
+        }
+    }
+    disconnectedCallback() {
+        this.focusedNode;
+    }
+    /**
+     * Fired when clicking backButton (<-)
+     */
+    backButtonClicked;
+    /**
+     * Fired when clicking backButton (X). Also sent when clicking the backdrop.
+     */
+    exitButtonClicked;
+    onBackButtonClick() {
+        this.backButtonClicked.emit();
+    }
+    onExitButtonClick() {
+        this.exitButtonClicked.emit();
+    }
+    setDrawerOpenState(open) {
+        const drawer = this.rootElement.shadowRoot.querySelector(".drawer--container");
+        if (!drawer) {
+            this.drawerState = open ? "opening" : "closing";
+        }
+        if (open) {
+            this.drawerState = "opening";
+            focusLock.on(drawer);
+        }
+        else {
+            focusLock.off(drawer);
+            this.drawerState = "closing";
+        }
+    }
+    render() {
+        const shouldRenderHeader = this.heading || this.showBackButton || this.showExitButton;
+        const getDrawerStateClass = (state) => {
+            switch (state) {
+                case "opening":
+                case "open":
+                    return "open";
+                case "closing":
+                    return "close";
+            }
+        };
+        return (h("div", { class: "drawer" }, !this.disableBackdrop && (
+        // biome-ignore lint/a11y/noStaticElementInteractions: <closable backdrop>
+        // biome-ignore lint/a11y/useKeyWithClickEvents: <closable backdrop>
+        h("div", { onClick: () => {
+                this.onExitButtonClick();
+            }, class: `backdrop ${this.drawerState !== "closed" ? "backdrop-visible" : "backdrop-hidden"}` })), h("div", { class: `drawer--container ${getDrawerStateClass(this.drawerState)}`, onAnimationEnd: () => {
+                this.drawerState = this.open ? "open" : "closed";
+            } }, shouldRenderHeader && (h("div", { class: "header--wrapper" }, this.showBackButton && (h("button", { type: "button", class: "back-button", onClick: () => this.onBackButtonClick() }, h("span", { class: "icon", innerHTML: backIcon }), h("span", { class: "visually-hidden" }, this.backButtonLabel))), this.showExitButton && (h("button", { type: "button", class: "exit-button", onClick: () => this.onExitButtonClick() }, h("span", { class: "icon", innerHTML: exitIcon }), h("span", { class: "visually-hidden" }, this.exitButtonLabel))), this.heading && h("h3", { class: "heading" }, this.heading))), h("div", { class: !this.disableContentPadding && `content--wrapper` }, h("slot", null)))));
+    }
+    static get is() { return "scout-drawer"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["drawer.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["drawer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Open/close state of the drawer."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Heading within the sheet."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading",
+                "defaultValue": "\"\""
+            },
+            "showBackButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Render back button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-back-button",
+                "defaultValue": "false"
+            },
+            "backButtonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Back button label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "back-button-label",
+                "defaultValue": "\"\""
+            },
+            "showExitButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Render exit button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-exit-button",
+                "defaultValue": "false"
+            },
+            "exitButtonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Exit button label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "exit-button-label",
+                "defaultValue": "\"\""
+            },
+            "disableBackdrop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disable backdrop for the drawer."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disable-backdrop",
+                "defaultValue": "false"
+            },
+            "disableContentPadding": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disable drawer content padding. Use only if you have specific use case and you need to use full width."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disable-content-padding",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "drawerState": {},
+            "focusedNode": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "backButtonClicked",
+                "name": "backButtonClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when clicking backButton (<-)"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "exitButtonClicked",
+                "name": "exitButtonClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when clicking backButton (X). Also sent when clicking the backdrop."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "rootElement"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "setDrawerOpenState"
+            }];
+    }
+}

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

@@ -1,5 +1,10 @@
-:host {
+/* :host {
+} */
+
+.list {
+  width: 100%;
   display: flex;
   flex-direction: column;
-  padding: var(--spacing-2) 0;
+  padding: var(--spacing-2);
+  gap: 2px;
 }

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

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { h } from "@stencil/core";
 export class ScoutListView {
     el;
     onScoutChecked(event) {
@@ -9,8 +9,8 @@ export class ScoutListView {
         const listItems = this.el.querySelectorAll("scout-list-view-item");
         const otherRadios = [];
         listItems.forEach((item) => {
-            const radios = item.shadowRoot.querySelectorAll(`input[type="radio"][name="${CSS.escape(element.name)}"]`);
-            radios.forEach((r) => {
+            const radios = item.shadowRoot?.querySelectorAll(`input[type="radio"][name="${CSS.escape(element.name)}"]`);
+            radios?.forEach((r) => {
                 if (r !== element) {
                     otherRadios.push(r);
                 }
@@ -21,7 +21,9 @@ export class ScoutListView {
         }
     }
     render() {
-        return (h(Host, { key: '68c7e8924c60ba15c6c8a64724eebeea1731909f', role: "list" }, h("slot", { key: '7b686b0f83c138ab0d497f9b6a0d7d5927bce63c' })));
+        return (
+        // biome-ignore lint/a11y/useSemanticElements: custom-elements are not allowed as children of a <ul>
+        h("div", { key: 'a2c79ce8e0fe8028cb7b093f6bf64961a0ef4d05', class: "list", role: "list" }, h("slot", { key: '6a147fbbb385c80325211e9cb009b6af0678dbb6' })));
     }
     static get is() { return "scout-list-view"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,17 +9,29 @@
   text-align: inherit;
   min-height: var(--spacing-12);
   color: var(--color-text-base);
-  padding: var(--spacing-2) var(--spacing-4);
+  padding: var(--spacing-4) var(--spacing-4);
   cursor: pointer;
-  border: none;
-  background-color: transparent;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  background-color: var(--color-white);
   -webkit-text-decoration: none;
   text-decoration: none;
+  border-radius: 6px;
+}
+
+:host(:first-of-type) .button {
+  border-top-left-radius: var(--spacing-4);
+  border-top-right-radius: var(--spacing-4);
+}
+
+:host(:last-of-type) .button {
+  border-bottom-left-radius: var(--spacing-4);
+  border-bottom-right-radius: var(--spacing-4);
 }
 
 @media (hover: hover) {
   .button:hover {
     background-color: var(--color-background-brand-subtle-hovered);
+    border-color: rgba(0, 0, 0, 0.03);
   }
 }
 
@@ -38,7 +50,7 @@
 
 .prefix-icon {
   justify-content: flex-start;
-  width: var(--spacing-14);
+  width: var(--spacing-10);
 }
 
 .suffix-icon {

package/dist/collection/components/segmented-control/segmented-control.css

@@ -0,0 +1,68 @@
+:host {
+  position: relative;
+  width: 100%;
+  display: flex;
+  height: var(--spacing-10);
+  border: 1px solid var(--color-gray-300);
+  border-radius: var(--spacing-2);
+  font: var(--type-body-md);
+  padding: 0 0.125rem;
+  padding: 0 var(--indicator-padding);
+
+  --indicator-padding: 0.125rem;
+  --button-padding: var(--spacing-3);
+}
+
+:host(.small) {
+  height: var(--spacing-8);
+  font: var(--type-body-sm);
+
+  --button-padding: var(--spacing-2);
+}
+
+.indicator {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 100%;
+  transition: all 0.2s ease;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.indicator::after {
+    content: "";
+    position: absolute;
+    top: var(--indicator-padding);
+    left: 0;
+    right: 0;
+    bottom: var(--indicator-padding);
+    border-radius: 0.375rem;
+    background-color: var(--color-background-brand-base);
+  }
+
+::slotted(button) {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 var(--button-padding);
+  font-size: var(--font-size-2);
+  color: var(--color-text-default);
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  transition: color 0.15s ease;
+  position: relative;
+  z-index: 1;
+}
+
+::-csstools-invalid-slotted(button):disabled {
+    color: var(--color-text-disabled);
+    cursor: not-allowed;
+  }
+
+::slotted(button[aria-checked="true"]) {
+  color: var(--color-text-brand-inverse);
+}