@statistikzh/leu 0.8.0 → 0.10.0

package/dist/vscode.html-custom-data.json

@@ -250,6 +250,21 @@
         }
       ]
     },
+    {
+      "name": "leu-dialog",
+      "description": "\n---\n",
+      "attributes": [
+        { "name": "label", "values": [] },
+        { "name": "sublabel", "values": [] },
+        { "name": "open", "values": [] }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://statistikzh.github.io/leu/?path=/story/dialog"
+        }
+      ]
+    },
     {
       "name": "leu-dropdown",
       "description": "\n---\n",
@@ -420,6 +435,11 @@
           "description": "Defines if the item is selected or checked",
           "values": []
         },
+        {
+          "name": "multipleSelection",
+          "description": "If the item is part of a multiple selection. Renders a checkmark before the label when active",
+          "values": []
+        },
         {
           "name": "disabled",
           "description": "Disables the underlying button or link",
@@ -603,6 +623,17 @@
         }
       ]
     },
+    {
+      "name": "leu-spinner",
+      "description": "\n---\n\n\n### **CSS Properties:**\n - **--leu-spinner-size** - The size of the spinner. _(default: undefined)_",
+      "attributes": [],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://statistikzh.github.io/leu/?path=/story/spinner"
+        }
+      ]
+    },
     {
       "name": "leu-table",
       "description": "\n---\n",

package/dist/vue/index.d.ts

@@ -10,6 +10,7 @@ import type { LeuChipGroup } from "../ChipGroup.js";
 import type { LeuChipLink } from "../ChipLink.js";
 import type { LeuChipRemovable } from "../ChipRemovable.js";
 import type { LeuChipSelectable, CustomEvent } from "../ChipSelectable.js";
+import type { LeuDialog } from "../Dialog.js";
 import type { LeuDropdown } from "../Dropdown.js";
 import type { LeuIcon } from "../Icon.js";
 import type { LeuInput, CustomEvent } from "../Input.js";
@@ -21,6 +22,7 @@ import type { LeuRadio } from "../Radio.js";
 import type { LeuRadioGroup } from "../RadioGroup.js";
 import type { LeuScrollTop } from "../ScrollTop.js";
 import type { LeuSelect } from "../Select.js";
+import type { LeuSpinner } from "../Spinner.js";
 import type { LeuTable } from "../Table.js";
 import type { LeuVisuallyHidden } from "../VisuallyHidden.js";
 
@@ -171,6 +173,17 @@ type LeuChipSelectableProps = {
   onInput?: (e: CustomEvent<CustomEvent>) => void;
 };
 
+type LeuDialogProps = {
+  /**  */
+  label?: LeuDialog["label"];
+  /**  */
+  sublabel?: LeuDialog["sublabel"];
+  /**  */
+  open?: LeuDialog["open"];
+  /**  */
+  _dialogRef?: LeuDialog["_dialogRef"];
+};
+
 type LeuDropdownProps = {
   /**  */
   label?: LeuDropdown["label"];
@@ -255,6 +268,8 @@ type LeuMenuProps = {
 type LeuMenuItemProps = {
   /** Defines if the item is selected or checked */
   active?: LeuMenuItem["active"];
+  /** If the item is part of a multiple selection. Renders a checkmark before the label when active */
+  multipleSelection?: LeuMenuItem["multipleSelection"];
   /** Disables the underlying button or link */
   disabled?: LeuMenuItem["disabled"];
   /** If the item should be focusable. Will be reflected as `tabindex` to the underlying button or link */
@@ -383,6 +398,8 @@ type LeuSelectProps = {
   _menuRef?: LeuSelect["_menuRef"];
 };
 
+type LeuSpinnerProps = {};
+
 type LeuTableProps = {
   /**  */
   columns?: LeuTable["columns"];
@@ -556,6 +573,13 @@ export type CustomElements = {
    */
   "leu-chip-selectable": DefineComponent<LeuChipSelectableProps>;
 
+  /**
+   *
+   * ---
+   *
+   */
+  "leu-dialog": DefineComponent<LeuDialogProps>;
+
   /**
    *
    * ---
@@ -674,6 +698,16 @@ export type CustomElements = {
    */
   "leu-select": DefineComponent<LeuSelectProps>;
 
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **CSS Properties:**
+   *  - **--leu-spinner-size** - The size of the spinner. _(default: undefined)_
+   */
+  "leu-spinner": DefineComponent<LeuSpinnerProps>;
+
   /**
    *
    * ---

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.8.0",
+  "version": "0.10.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -488,6 +488,34 @@
             "events": [{ "name": "input" }]
           }
         },
+        {
+          "name": "leu-dialog",
+          "description": "\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "label",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "sublabel",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "open",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "label", "value": { "type": "string" } },
+              { "name": "sublabel", "value": { "type": "string" } },
+              { "name": "open", "value": { "type": "boolean" } }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "leu-dropdown",
           "description": "\n---\n",
@@ -803,6 +831,11 @@
               "description": "Defines if the item is selected or checked",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "multipleSelection",
+              "description": "If the item is part of a multiple selection. Renders a checkmark before the label when active",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "disabled",
               "description": "Disables the underlying button or link",
@@ -840,6 +873,11 @@
                 "description": "Defines if the item is selected or checked",
                 "value": { "type": "boolean" }
               },
+              {
+                "name": "multipleSelection",
+                "description": "If the item is part of a multiple selection. Renders a checkmark before the label when active",
+                "value": { "type": "boolean" }
+              },
               {
                 "name": "disabled",
                 "description": "Disables the underlying button or link",
@@ -1147,6 +1185,14 @@
             "events": []
           }
         },
+        {
+          "name": "leu-spinner",
+          "description": "\n---\n\n\n### **CSS Properties:**\n - **--leu-spinner-size** - The size of the spinner. _(default: undefined)_",
+          "doc-url": "",
+          "attributes": [],
+          "events": [],
+          "js": { "properties": [], "events": [] }
+        },
         {
           "name": "leu-table",
           "description": "\n---\n",

package/package.json

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

package/rollup.config.js

@@ -11,7 +11,10 @@ export const plugins = [
     plugin: replace,
     args: [
       {
-        __LEU_VERSION__: JSON.stringify(process.env.npm_package_version),
+        preventAssignment: true,
+        values: {
+          __LEU_VERSION__: JSON.stringify(process.env.npm_package_version),
+        },
       },
     ],
   },

package/scripts/generate-component/templates/[namespace]-[name].js

@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { [Namespace][Name] } from "./[Name].js"
 
 export { [Namespace][Name] }
 
-defineElement("[name]", [Namespace][Name])
+[Namespace][Name].define("[namespace]-[name]")

package/scripts/postcss-leu-font-styles.cjs

@@ -14,13 +14,13 @@ async function parseFile(file) {
 }
 
 function generateCustomPropertyDeclarations({
-  identifier,
+  name,
   fontSize,
   fontWeight,
   lineHeight,
   spacing,
 }) {
-  const customPropertyPrefix = `--leu-t-${identifier}-${fontWeight}`
+  const customPropertyPrefix = `--leu-t-${name}-${fontWeight}`
 
   const varFontSize = `${customPropertyPrefix}-font-size`
   const varLineHeight = `${customPropertyPrefix}-line-height`
@@ -77,14 +77,11 @@ async function createLeuFontStyleNodes(file, postcss, nodeSource) {
       : [style.fontWeight]
     const spacing = getPixelValue(style.spacing) / 16
 
-    const identifier = (fontSize / 4) * 10
-
     return fontWeights.map((fontWeight) => ({
       name: style.name,
       fontWeight,
-      identifier,
       declarations: generateCustomPropertyDeclarations({
-        identifier,
+        name: style.name,
         fontSize,
         fontWeight,
         lineHeight: style.lineHeight,
@@ -100,36 +97,33 @@ async function createLeuFontStyleNodes(file, postcss, nodeSource) {
     )
   )
 
-  const curveNodes = curves.flatMap((curve) => {
-    const [_, lastStepName] = curve.steps.at(-1)
-    const { identifier } = fontStyleDeclarations.find(
-      (style) => style.name === lastStepName && style.fontWeight === "black"
-    )
-
-    const curvePrefix = `--leu-t-curve-${identifier}-black`
-
-    return curve.steps.flatMap((step) => {
-      const [viewport, styleName] = step
-
-      const stepStyle = fontStyleDeclarations.find(
-        (s) => s.name === styleName && s.fontWeight === "black"
-      )
-
-      const nodes = curveStepDeclarations(curvePrefix, stepStyle).map(
-        ({ prop, value }) =>
-          new postcss.Declaration({ prop, value, source: nodeSource })
-      )
-
-      return viewport === null
-        ? nodes
-        : new postcss.AtRule({
-            name: "media",
-            params: `(${viewport})`,
-            nodes,
-            source: nodeSource,
-          })
+  const curveNodes = curves.flatMap((curve) =>
+    curve.weights.flatMap((fontWeight) => {
+      const curvePrefix = `--leu-t-curve-${curve.name}-${fontWeight}`
+
+      return curve.steps.flatMap((step) => {
+        const [viewport, styleName] = step
+
+        const stepStyle = fontStyleDeclarations.find(
+          (s) => s.name === styleName && s.fontWeight === fontWeight
+        )
+
+        const nodes = curveStepDeclarations(curvePrefix, stepStyle).map(
+          ({ prop, value }) =>
+            new postcss.Declaration({ prop, value, source: nodeSource })
+        )
+
+        return viewport === null
+          ? nodes
+          : new postcss.AtRule({
+              name: "media",
+              params: `(${viewport})`,
+              nodes,
+              source: nodeSource,
+            })
+      })
     })
-  })
+  )
 
   return [...fontStyleNodes, ...curveNodes]
 }

package/src/components/button/button.css

@@ -8,7 +8,7 @@ button {
   appearance: none;
   transition: background 0.1s ease;
   cursor: pointer;
-  border: 1px solid transparent;
+  border: none;
   border-radius: 2px;
 
   max-width: 100%;
@@ -33,12 +33,11 @@ button:disabled {
 }
 
 button:focus-visible {
-  border: 1px solid var(--leu-color-black-0);
   outline: 2px solid var(--leu-color-func-cyan);
+  outline-offset: 2px;
 }
 
 button.inverted:focus-visible {
-  border: 1px solid var(--leu-color-black-100);
   outline: 2px solid var(--leu-color-black-0);
 }
 

package/src/components/checkbox/Checkbox.js

@@ -59,7 +59,7 @@ export class LeuCheckbox extends LeuElement {
         @input=${this.handleInput}
         .checked=${this.checked}
         ?disabled=${this.disabled}
-        .value=${this.value}
+        .value=${this.value ?? ""}
       />
       <label for=${`checkbox-${this.name}`} class="label"><slot></slot></label>
       <leu-icon class="icon" name="check"></leu-icon>

package/src/components/checkbox/stories/checkbox.stories.js

@@ -17,9 +17,14 @@ export default {
   },
 }
 
-function Template({ label = "Label", value, checked, disabled }) {
+function Template({ label = "Label", value, checked, disabled, name = "" }) {
   return html`
-    <leu-checkbox .value=${value} ?checked=${checked} ?disabled=${disabled}>
+    <leu-checkbox
+      .value=${value}
+      ?checked=${checked}
+      ?disabled=${disabled}
+      name=${name}
+    >
       ${label}
     </leu-checkbox>
   `

package/src/components/chip/chip-group.css

@@ -1,6 +1,6 @@
 .label {
   margin: 0 0 0.5rem;
-  font: var(--leu-t-curve-35-black-font);
+  font: var(--leu-t-curve-tiny-black-font);
   color: var(--leu-color-black-100);
 }
 

package/src/components/dialog/Dialog.js

@@ -0,0 +1,100 @@
+import { html, nothing } from "lit"
+import { createRef, ref } from "lit/directives/ref.js"
+import { classMap } from "lit/directives/class-map.js"
+
+import { LeuElement } from "../../lib/LeuElement.js"
+import { HasSlotController } from "../../lib/hasSlotController.js"
+import { LeuIcon } from "../icon/Icon.js"
+
+// design: https://www.figma.com/design/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?node-id=21161-186812&node-type=FRAME
+
+// @ts-ignore
+import styles from "./dialog.css"
+
+/**
+ * @tagname leu-dialog
+ */
+export class LeuDialog extends LeuElement {
+  static dependencies = {
+    "leu-icon": LeuIcon,
+  }
+
+  static styles = styles
+
+  static shadowRootOptions = {
+    ...LeuElement.shadowRootOptions,
+    delegatesFocus: true,
+  }
+
+  /**
+   * @internal
+   */
+  hasSlotController = new HasSlotController(this, ["toolbar"])
+
+  static properties = {
+    label: { type: String },
+    sublabel: { type: String },
+    open: { type: Boolean, open: true },
+  }
+
+  constructor() {
+    super()
+
+    /** @type {import("lit/directives/ref").Ref<HTMLDialogElement>} */
+    this._dialogRef = createRef()
+
+    /** @type {string} */
+    this.label = ""
+    /** @type {string} */
+    this.sublabel = ""
+    /** @type {boolean} */
+    this.open = false
+  }
+
+  show() {
+    this._dialogRef.value.showModal()
+  }
+
+  close() {
+    this._dialogRef.value.close()
+  }
+
+  render() {
+    const hasActionbar = this.hasSlotController.test("actionbar")
+
+    const closeButtonLabelClasses = {
+      "close-button__label": true,
+      "close-button__label--hidden": hasActionbar,
+    }
+
+    return html`
+      <dialog class="dialog" ref=${ref(this._dialogRef)} ?open=${this.open}>
+        <div class="content">
+          <div class="header">
+            <div class="title-wrapper">
+              <h1 class="title">${this.label}</h1>
+              ${this.sublabel
+                ? html`<p class="subtitle">${this.sublabel}</p>`
+                : nothing}
+            </div>
+            <button
+              class="close-button"
+              @click=${this.close}
+              aria-label="Schliessen"
+            >
+              <span
+                class=${classMap(closeButtonLabelClasses)}
+                aria-hidden="true"
+                >Schliessen</span
+              ><leu-icon name="close"> </leu-icon>
+            </button>
+          </div>
+          <slot></slot>
+        </div>
+        <div class="actionbar">
+          <slot name="actionbar"></slot>
+        </div>
+      </dialog>
+    `
+  }
+}

package/src/components/dialog/dialog.css

@@ -0,0 +1,162 @@
+@import url("../../styles/custom-media.css");
+
+/* figma https://www.figma.com/design/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?node-id=21161-186812&t=8VgDy9avMRG5aL7s-0 */
+
+:host,
+:host * {
+  box-sizing: border-box;
+}
+
+:host {
+  --dialog-font-regular: var(--leu-font-family-regular);
+  --dialog-font-black: var(--leu-font-family-black);
+
+  font-family: var(--dialog-font-regular);
+}
+
+.dialog {
+  background: #fff;
+  border: 0;
+  padding: 0;
+
+  overflow: hidden;
+  background-color: var(--leu-color-black-0);
+
+  flex-direction: column;
+
+  margin: 0 auto;
+  height: 100vh;
+  width: 100vw;
+  max-height: 100vh;
+  max-width: 100vw;
+
+  @media (--viewport-regular) {
+    margin: 80px auto;
+    height: fit-content;
+    width: fit-content;
+    max-width: min(100% - 4.5rem, 60.5rem);
+    max-height: calc(100vh - 5rem);
+  }
+}
+
+.dialog[open] {
+  display: flex;
+}
+
+.dialog::backdrop {
+  background-color: var(--leu-color-black-transp-40);
+}
+
+.content {
+  --padding: 2rem;
+  padding: var(--padding);
+  padding-bottom: 0;
+  margin-bottom: 1.5rem;
+  overflow-y: auto;
+
+  @media (--viewport-regular) {
+    --padding: 2.5rem;
+  }
+
+  @media (--viewport-medium) {
+    margin-bottom: 2rem;
+  }
+
+  @media (--viewport-large) {
+    --padding: 3.5rem;
+  }
+
+  @media (--viewport-xlarge) {
+    margin-bottom: 2.5rem;
+  }
+}
+
+.title-wrapper {
+  display: flex;
+  flex-flow: column wrap;
+}
+
+.header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.title {
+  font: var(--leu-t-curve-big-black-font);
+  margin: 0 0 0.75rem;
+  order: 2;
+
+  @media (--viewport-regular) {
+    margin-bottom: 1rem;
+  }
+
+  @media (--viewport-medium) {
+    margin-bottom: 1.25rem;
+  }
+
+  @media (--viewport-xlarge) {
+    margin-bottom: 1.5rem;
+    font: var(--leu-t-bigger-big-black-font);
+  }
+}
+
+.subtitle {
+  color: var(--leu-color-black-transp-60);
+  font-size: var(--leu-t-tiny-regular-font-size);
+  line-height: var(--leu-t-tiny-regular-line-height);
+
+  order: 1;
+
+  margin: 0 0 4px;
+}
+
+.close-button {
+  cursor: pointer;
+  display: flex;
+  gap: 0.5rem;
+
+  padding: 0.25rem 0;
+  margin-left: 0.75rem;
+  border: 0;
+  border-radius: 0.125rem;
+
+  color: var(--leu-color-black-transp-60);
+  background: transparent;
+
+  @media (--viewport-regular) {
+    margin-left: 1rem;
+  }
+
+  @media (--viewport-medium) {
+    margin-left: 1.25rem;
+  }
+
+  @media (--viewport-xlarge) {
+    margin-left: 1.5rem;
+  }
+}
+
+.close-button:focus-visible {
+  outline: 2px solid var(--leu-color-func-cyan);
+  outline-offset: 2px;
+}
+
+.close-button__label {
+  display: none;
+  font: var(--leu-t-regular-regular-font);
+
+  @media (--viewport-medium) {
+    display: inline;
+  }
+}
+
+.close-button__label--hidden {
+  display: none;
+}
+
+.actionbar {
+  display: flex;
+  justify-content: flex-end;
+  min-height: 3rem;
+}

package/src/components/dialog/leu-dialog.js

@@ -0,0 +1,5 @@
+import { LeuDialog } from "./Dialog.js"
+
+export { LeuDialog }
+
+LeuDialog.define("leu-dialog")