@statistikzh/leu 0.22.1 → 0.23.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@statistikzh/leu",
-  "version": "0.22.1",
+  "version": "0.23.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -212,74 +212,44 @@
           }
         },
         {
-          "name": "leu-checkbox",
-          "description": "\n---\n",
+          "name": "leu-chart-wrapper",
+          "description": "A wrapper element for charts.\n---\n\n\n### **Slots:**\n - **title** - The title of the chart. Use a heading tag (h2-4) depending on your context.\n- **description** - A description of the chart. Content is wrapped in a `<p>` tag by the component.\n- **chart** - The actual chart\n- **caption** - A caption for the chart, e.g. a source or explanation of the data.\n- **download** - A download button or dropdown to export the chart in different formats.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "checked",
+              "name": "pending",
+              "description": "Whether the chart is currently loading or not.\nWhen set to `true`, a spinner will be shown in the chart container.",
               "value": { "type": "boolean", "default": "false" }
-            },
+            }
+          ],
+          "slots": [
             {
-              "name": "disabled",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "title",
+              "description": "The title of the chart. Use a heading tag (h2-4) depending on your context."
             },
             {
-              "name": "value",
-              "value": { "type": "string", "default": "\"\"" }
+              "name": "description",
+              "description": "A description of the chart. Content is wrapped in a `<p>` tag by the component."
             },
-            { "name": "name", "value": { "type": "string", "default": "\"\"" } }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "checked", "type": "boolean" },
-              { "name": "disabled", "type": "boolean" },
-              { "name": "value", "type": "string" },
-              { "name": "name", "type": "string" }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "leu-checkbox-group",
-          "description": "\n---\n\n\n### **Slots:**\n - _default_ - Place the checkboxes inside the default slot.",
-          "doc-url": "",
-          "attributes": [
+            { "name": "chart", "description": "The actual chart" },
             {
-              "name": "orientation",
-              "description": "Defines how the checkboxes should be aligned.",
-              "value": {
-                "type": "\"horizontal\" | \"vertical\"",
-                "default": "\"horizontal\""
-              }
+              "name": "caption",
+              "description": "A caption for the chart, e.g. a source or explanation of the data."
             },
             {
-              "name": "label",
-              "description": "The label of the checkbox group",
-              "value": { "type": "string | undefined" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "",
-              "description": "Place the checkboxes inside the default slot."
+              "name": "download",
+              "description": "A download button or dropdown to export the chart in different formats."
             }
           ],
           "events": [],
           "js": {
             "properties": [
               {
-                "name": "orientation",
-                "description": "Defines how the checkboxes should be aligned.",
-                "type": "\"horizontal\" | \"vertical\""
-              },
-              {
-                "name": "label",
-                "description": "The label of the checkbox group",
-                "type": "string | undefined"
+                "name": "pending",
+                "description": "Whether the chart is currently loading or not.\nWhen set to `true`, a spinner will be shown in the chart container.",
+                "type": "boolean"
               },
-              { "name": "value" }
+              { "name": "hasSlotController" }
             ],
             "events": []
           }
@@ -312,44 +282,74 @@
           }
         },
         {
-          "name": "leu-chart-wrapper",
-          "description": "A wrapper element for charts.\n---\n\n\n### **Slots:**\n - **title** - The title of the chart. Use a heading tag (h2-4) depending on your context.\n- **description** - A description of the chart. Content is wrapped in a `<p>` tag by the component.\n- **chart** - The actual chart\n- **caption** - A caption for the chart, e.g. a source or explanation of the data.\n- **download** - A download button or dropdown to export the chart in different formats.",
+          "name": "leu-checkbox",
+          "description": "\n---\n",
           "doc-url": "",
           "attributes": [
             {
-              "name": "pending",
-              "description": "Whether the chart is currently loading or not.\nWhen set to `true`, a spinner will be shown in the chart container.",
+              "name": "checked",
               "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "slots": [
+            },
             {
-              "name": "title",
-              "description": "The title of the chart. Use a heading tag (h2-4) depending on your context."
+              "name": "disabled",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "description",
-              "description": "A description of the chart. Content is wrapped in a `<p>` tag by the component."
+              "name": "value",
+              "value": { "type": "string", "default": "\"\"" }
             },
-            { "name": "chart", "description": "The actual chart" },
+            { "name": "name", "value": { "type": "string", "default": "\"\"" } }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "checked", "type": "boolean" },
+              { "name": "disabled", "type": "boolean" },
+              { "name": "value", "type": "string" },
+              { "name": "name", "type": "string" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "leu-checkbox-group",
+          "description": "\n---\n\n\n### **Slots:**\n - _default_ - Place the checkboxes inside the default slot.",
+          "doc-url": "",
+          "attributes": [
             {
-              "name": "caption",
-              "description": "A caption for the chart, e.g. a source or explanation of the data."
+              "name": "orientation",
+              "description": "Defines how the checkboxes should be aligned.",
+              "value": {
+                "type": "\"horizontal\" | \"vertical\"",
+                "default": "\"horizontal\""
+              }
             },
             {
-              "name": "download",
-              "description": "A download button or dropdown to export the chart in different formats."
+              "name": "label",
+              "description": "The label of the checkbox group",
+              "value": { "type": "string | undefined" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "Place the checkboxes inside the default slot."
             }
           ],
           "events": [],
           "js": {
             "properties": [
               {
-                "name": "pending",
-                "description": "Whether the chart is currently loading or not.\nWhen set to `true`, a spinner will be shown in the chart container.",
-                "type": "boolean"
+                "name": "orientation",
+                "description": "Defines how the checkboxes should be aligned.",
+                "type": "\"horizontal\" | \"vertical\""
               },
-              { "name": "hasSlotController" }
+              {
+                "name": "label",
+                "description": "The label of the checkbox group",
+                "type": "string | undefined"
+              },
+              { "name": "value" }
             ],
             "events": []
           }
@@ -410,87 +410,6 @@
             "events": []
           }
         },
-        {
-          "name": "leu-file-input",
-          "description": "\n---\n\n\n### **Events:**\n - **input**\n- **change**",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "label",
-              "value": { "type": "string", "default": "\"\"" }
-            },
-            {
-              "name": "accept",
-              "description": "A list of acceptable file types. Must be a comma-separated list of [unique file type specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers).",
-              "value": { "type": "string", "default": "\"\"" }
-            },
-            {
-              "name": "disabled",
-              "description": "Whether the file input is disabled.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "multiple",
-              "description": "Whether the file input allows multiple files.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "required",
-              "description": "Whether the file input is required.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "variant",
-              "description": "The variant of the file list item. `filled` renders a gray background.",
-              "value": {
-                "type": "\"filled\" | \"transparent\"",
-                "default": "\"filled\""
-              }
-            }
-          ],
-          "events": [
-            { "name": "input", "type": "CustomEvent" },
-            { "name": "change", "type": "CustomEvent" }
-          ],
-          "js": {
-            "properties": [
-              { "name": "label", "type": "string" },
-              {
-                "name": "accept",
-                "description": "A list of acceptable file types. Must be a comma-separated list of [unique file type specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers).",
-                "type": "string"
-              },
-              {
-                "name": "disabled",
-                "description": "Whether the file input is disabled.",
-                "type": "boolean"
-              },
-              {
-                "name": "multiple",
-                "description": "Whether the file input allows multiple files.",
-                "type": "boolean"
-              },
-              {
-                "name": "required",
-                "description": "Whether the file input is required.",
-                "type": "boolean"
-              },
-              {
-                "name": "variant",
-                "description": "The variant of the file list item. `filled` renders a gray background.",
-                "type": "\"filled\" | \"transparent\""
-              },
-              { "name": "files", "type": "File[]" },
-              { "name": "input", "type": "HTMLInputElement" },
-              { "name": "form" },
-              { "name": "name" }
-            ],
-            "events": [
-              { "name": "input", "type": "CustomEvent" },
-              { "name": "change", "type": "CustomEvent" }
-            ]
-          }
-        },
         {
           "name": "leu-chip-group",
           "description": "\n---\n\n\n### **Slots:**\n - _default_ - Place leu-chip-* elements inside this slot\n\n### **CSS Properties:**\n - **--leu-chip-group-gap** - The gap between the chips _(default: undefined)_",
@@ -687,26 +606,84 @@
           }
         },
         {
-          "name": "leu-icon",
-          "description": "A component to render all defined zhWeb icons.\nThe `fill` of the icon is set to `currentColor` and\ncan be overriden by setting the css `color` property.\nIf the icon name is not found, a placeholder will be displayed.\n---\n\n\n### **CSS Properties:**\n - **--leu-icon-size** - The size of the icon. _(default: undefined)_",
+          "name": "leu-file-input",
+          "description": "\n---\n\n\n### **Events:**\n - **input**\n- **change**",
           "doc-url": "",
           "attributes": [
             {
-              "name": "name",
-              "description": "The name of the icon to display.",
-              "value": { "type": "IconPathName | \"\"", "default": "\"\"" }
+              "name": "label",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "accept",
+              "description": "A list of acceptable file types. Must be a comma-separated list of [unique file type specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers).",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "disabled",
+              "description": "Whether the file input is disabled.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "multiple",
+              "description": "Whether the file input allows multiple files.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "required",
+              "description": "Whether the file input is required.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "variant",
+              "description": "The variant of the file list item. `filled` renders a gray background.",
+              "value": {
+                "type": "\"filled\" | \"transparent\"",
+                "default": "\"filled\""
+              }
             }
           ],
-          "events": [],
+          "events": [
+            { "name": "input", "type": "CustomEvent" },
+            { "name": "change", "type": "CustomEvent" }
+          ],
           "js": {
             "properties": [
+              { "name": "label", "type": "string" },
               {
-                "name": "name",
-                "description": "The name of the icon to display.",
-                "type": "IconPathName | \"\""
-              }
+                "name": "accept",
+                "description": "A list of acceptable file types. Must be a comma-separated list of [unique file type specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers).",
+                "type": "string"
+              },
+              {
+                "name": "disabled",
+                "description": "Whether the file input is disabled.",
+                "type": "boolean"
+              },
+              {
+                "name": "multiple",
+                "description": "Whether the file input allows multiple files.",
+                "type": "boolean"
+              },
+              {
+                "name": "required",
+                "description": "Whether the file input is required.",
+                "type": "boolean"
+              },
+              {
+                "name": "variant",
+                "description": "The variant of the file list item. `filled` renders a gray background.",
+                "type": "\"filled\" | \"transparent\""
+              },
+              { "name": "files", "type": "File[]" },
+              { "name": "input", "type": "HTMLInputElement" },
+              { "name": "form" },
+              { "name": "name" }
             ],
-            "events": []
+            "events": [
+              { "name": "input", "type": "CustomEvent" },
+              { "name": "change", "type": "CustomEvent" }
+            ]
           }
         },
         {
@@ -949,6 +926,29 @@
             ]
           }
         },
+        {
+          "name": "leu-icon",
+          "description": "A component to render all defined zhWeb icons.\nThe `fill` of the icon is set to `currentColor` and\ncan be overriden by setting the css `color` property.\nIf the icon name is not found, a placeholder will be displayed.\n---\n\n\n### **CSS Properties:**\n - **--leu-icon-size** - The size of the icon. _(default: undefined)_",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "name",
+              "description": "The name of the icon to display.",
+              "value": { "type": "IconPathName | \"\"", "default": "\"\"" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "name",
+                "description": "The name of the icon to display.",
+                "type": "IconPathName | \"\""
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "leu-menu",
           "description": "\n---\n",
@@ -1247,6 +1247,21 @@
                 "type": "\"width\" | \"height\" | \"both\" | undefined"
               }
             },
+            {
+              "name": "offset-main-axis",
+              "description": "Offsets the popup along the main axis.",
+              "value": { "type": "number | undefined" }
+            },
+            {
+              "name": "offset-cross-axis",
+              "description": "Offsets the popup along the cross axis.",
+              "value": { "type": "number | undefined" }
+            },
+            {
+              "name": "offset-alignment-axis",
+              "description": "Offsets the popup along the alignment axis.\nOverrides the `offsetCrossAxis` value.",
+              "value": { "type": "number | undefined" }
+            },
             {
               "name": "autoSize",
               "value": {
@@ -1271,6 +1286,21 @@
                 "name": "matchSize",
                 "type": "\"width\" | \"height\" | \"both\" | undefined"
               },
+              {
+                "name": "offsetMainAxis",
+                "description": "Offsets the popup along the main axis.",
+                "type": "number | undefined"
+              },
+              {
+                "name": "offsetCrossAxis",
+                "description": "Offsets the popup along the cross axis.",
+                "type": "number | undefined"
+              },
+              {
+                "name": "offsetAlignmentAxis",
+                "description": "Offsets the popup along the alignment axis.\nOverrides the `offsetCrossAxis` value.",
+                "type": "number | undefined"
+              },
               {
                 "name": "autoSize",
                 "type": "| \"width\"\n    | \"height\"\n    | \"both\" | undefined"

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI component library of the canton of zurich",
   "license": "MIT",
   "author": "statistikzh",
-  "version": "0.22.1",
+  "version": "0.23.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/components/popup/Popup.ts

@@ -7,6 +7,7 @@ import {
   Placement,
   shift,
   size,
+  offset,
 } from "@floating-ui/dom"
 
 import { LeuElement } from "../../lib/LeuElement.js"
@@ -58,6 +59,28 @@ export class LeuPopup extends LeuElement {
   @property({ type: String, reflect: true })
   matchSize?: "width" | "height" | "both"
 
+  /**
+   * Offsets the popup along the main axis.
+   * @link https://floating-ui.com/docs/offset#mainaxis
+   */
+  @property({ type: Number, reflect: true, attribute: "offset-main-axis" })
+  offsetMainAxis?: number
+
+  /**
+   * Offsets the popup along the cross axis.
+   * @link https://floating-ui.com/docs/offset#crossaxis
+   */
+  @property({ type: Number, reflect: true, attribute: "offset-cross-axis" })
+  offsetCrossAxis?: number
+
+  /**
+   * Offsets the popup along the alignment axis.
+   * Overrides the `offsetCrossAxis` value.
+   * @link https://floating-ui.com/docs/offset#alignmentaxis
+   */
+  @property({ type: Number, reflect: true, attribute: "offset-alignment-axis" })
+  offsetAlignmentAxis?: number
+
   @property({ type: String, reflect: true }) autoSize?:
     | "width"
     | "height"
@@ -116,6 +139,20 @@ export class LeuPopup extends LeuElement {
 
     const middleware = []
 
+    if (
+      this.offsetAlignmentAxis ||
+      this.offsetMainAxis ||
+      this.offsetCrossAxis
+    ) {
+      middleware.push(
+        offset({
+          mainAxis: this.offsetMainAxis,
+          crossAxis: this.offsetCrossAxis,
+          alignmentAxis: this.offsetAlignmentAxis,
+        }),
+      )
+    }
+
     if (this.matchSize) {
       middleware.push(
         size({

package/src/components/popup/stories/popup.stories.ts

@@ -43,6 +43,9 @@ function Template(args = {}) {
     ?flip=${args.flip}
     ?shift=${args.shift}
     placement=${ifDefined(args.placement)}
+    offset-main-axis=${ifDefined(args.offsetMainAxis)}
+    offset-cross-axis=${ifDefined(args.offsetCrossAxis)}
+    offset-alignment-axis=${ifDefined(args.offsetAlignmentAxis)}
   >
     <leu-button slot="anchor">Open popup</leu-button>
     <div style=${styleMap(popupStyles)}>Popup content</div>
@@ -55,6 +58,8 @@ Regular.args = {
   placement: "bottom-start",
   flip: true,
   shift: true,
+  offsetMainAxis: 0,
+  offsetAlignmentAxis: 0,
 }
 
 export const VirtualElement = {
@@ -64,6 +69,9 @@ export const VirtualElement = {
       ?flip=${args.flip}
       ?shift=${args.shift}
       placement=${ifDefined(args.placement)}
+      offset-main-axis=${ifDefined(args.offsetMainAxis)}
+      offset-cross-axis=${ifDefined(args.offsetCrossAxis)}
+      offset-alignment-axis=${ifDefined(args.offsetAlignmentAxis)}
     >
       <div style=${styleMap(popupStyles)}>Popup content</div>
     </leu-popup>
@@ -103,5 +111,7 @@ export const VirtualElement = {
     placement: "bottom-start",
     flip: true,
     shift: true,
+    offsetMainAxis: 8,
+    offsetAlignmentAxis: 8,
   },
 }

package/src/components/popup/test/popup.test.ts

@@ -60,4 +60,31 @@ describe("LeuPopup", () => {
     expect(popupContent.style.left).to.equal("32px")
     expect(popupContent.style.top).to.equal("125px")
   })
+
+  it("applies offset properties correctly", async () => {
+    const popup = await fixture<LeuPopup>(
+      html`<leu-popup
+        ?active=${true}
+        placement="bottom-start"
+        offset-main-axis="12"
+        offset-cross-axis="9"
+      >
+        <div
+          slot="anchor"
+          style="width: 16px; height: 16px; position: absolute; top: 0; left: 0;"
+        ></div>
+        <div style="background: white; padding: 0.5rem">Popup content</div>
+      </leu-popup>`,
+    )
+
+    await new Promise<void>((resolve) => {
+      requestAnimationFrame(() => resolve())
+    })
+
+    const popupContent =
+      popup.shadowRoot!.querySelector<HTMLDivElement>(".popup")
+
+    expect(popupContent.style.left).to.equal("9px") // offset-cross-axis
+    expect(popupContent.style.top).to.equal("28px") // offset-main-axis + anchor height
+  })
 })

package/web-test-runner.config.mjs

@@ -64,6 +64,16 @@ export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link rel="stylesheet" href="dist/theme.css" />
         <link rel="stylesheet" href="https://www.web.statistik.zh.ch/leu/styles/fonts.css" />
+        <style>
+          *, *::before, *::after {
+            box-sizing: border-box;
+          }
+
+          *:not(dialog) {
+            margin: 0;
+          }
+        </style>
+
       </head>
       <body>
         <script type="module" src="${testFramework}"></script>