@statistikzh/leu 0.16.0 → 0.18.0

package/dist/leu-chart-wrapper.js

@@ -2,7 +2,7 @@ import { LeuChartWrapper } from './ChartWrapper.js';
 import './_tslib-CNEFicEt.js';
 import 'lit';
 import 'lit/decorators.js';
-import './LeuElement-C0BZ_nPB.js';
+import './LeuElement-DlQXnrk8.js';
 import './hasSlotController-Bm2tipvG.js';
 import './Spinner.js';
 

package/dist/leu-checkbox-group.js

@@ -3,7 +3,7 @@ import './_tslib-CNEFicEt.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 import 'lit/decorators.js';
-import './LeuElement-C0BZ_nPB.js';
+import './LeuElement-DlQXnrk8.js';
 import './Checkbox.js';
 import './Icon.js';
 

package/dist/leu-checkbox.js

@@ -2,7 +2,7 @@ import { LeuCheckbox } from './Checkbox.js';
 import './_tslib-CNEFicEt.js';
 import 'lit';
 import 'lit/decorators.js';
-import './LeuElement-C0BZ_nPB.js';
+import './LeuElement-DlQXnrk8.js';
 import './Icon.js';
 
 LeuCheckbox.define("leu-checkbox");

package/dist/leu-chip-group.js

@@ -1,6 +1,6 @@
 import { LeuChipGroup } from './ChipGroup.js';
 import 'lit/static-html.js';
-import './LeuElement-C0BZ_nPB.js';
+import './LeuElement-DlQXnrk8.js';
 import 'lit';
 
 LeuChipGroup.define("leu-chip-group");

package/dist/leu-chip-link.js

@@ -1,7 +1,7 @@
 import { LeuChipLink } from './ChipLink.js';
 import 'lit';
 import './Chip.js';
-import './LeuElement-C0BZ_nPB.js';
+import './LeuElement-DlQXnrk8.js';
 
 LeuChipLink.define("leu-chip-link");
 

package/dist/leu-chip-removable.js

@@ -1,8 +1,10 @@
 import { LeuChipRemovable } from './ChipRemovable.js';
 import 'lit';
 import './Chip.js';
-import './LeuElement-C0BZ_nPB.js';
+import './LeuElement-DlQXnrk8.js';
 import './Icon.js';
+import './_tslib-CNEFicEt.js';
+import 'lit/decorators.js';
 
 LeuChipRemovable.define("leu-chip-removable");
 

package/dist/leu-chip-selectable.js

@@ -1,7 +1,7 @@
 import { LeuChipSelectable } from './ChipSelectable.js';
 import 'lit';
 import './Chip.js';
-import './LeuElement-C0BZ_nPB.js';
+import './LeuElement-DlQXnrk8.js';
 
 LeuChipSelectable.define("leu-chip-selectable");
 

package/dist/leu-dialog.js

@@ -2,9 +2,11 @@ import { LeuDialog } from './Dialog.js';
 import 'lit';
 import 'lit/directives/ref.js';
 import 'lit/directives/class-map.js';
-import './LeuElement-C0BZ_nPB.js';
+import './LeuElement-DlQXnrk8.js';
 import './hasSlotController-Bm2tipvG.js';
 import './Icon.js';
+import './_tslib-CNEFicEt.js';
+import 'lit/decorators.js';
 
 LeuDialog.define("leu-dialog");
 

package/dist/leu-dropdown.js

@@ -1,7 +1,7 @@
 import { LeuDropdown } from './Dropdown.js';
 import 'lit';
 import 'lit/directives/ref.js';
-import './LeuElement-C0BZ_nPB.js';
+import './LeuElement-DlQXnrk8.js';
 import './hasSlotController-Bm2tipvG.js';
 import './Button.js';
 import './_tslib-CNEFicEt.js';

package/dist/leu-icon.js

@@ -1,6 +1,8 @@
 import { LeuIcon } from './Icon.js';
+import './_tslib-CNEFicEt.js';
 import 'lit';
-import './LeuElement-C0BZ_nPB.js';
+import 'lit/decorators.js';
+import './LeuElement-DlQXnrk8.js';
 
 LeuIcon.define("leu-icon");
 

package/dist/leu-input.js

@@ -4,8 +4,10 @@ import 'lit/directives/class-map.js';
 import 'lit/directives/if-defined.js';
 import 'lit/directives/live.js';
 import 'lit/directives/ref.js';
-import './LeuElement-C0BZ_nPB.js';
+import './LeuElement-DlQXnrk8.js';
 import './Icon.js';
+import './_tslib-CNEFicEt.js';
+import 'lit/decorators.js';
 
 LeuInput.define("leu-input");
 

package/dist/leu-menu-item.js

@@ -1,8 +1,10 @@
 import { LeuMenuItem } from './MenuItem.js';
 import 'lit';
 import 'lit/directives/if-defined.js';
-import './LeuElement-C0BZ_nPB.js';
+import './LeuElement-DlQXnrk8.js';
 import './Icon.js';
+import './_tslib-CNEFicEt.js';
+import 'lit/decorators.js';
 
 LeuMenuItem.define("leu-menu-item");
 

package/dist/leu-menu.js

@@ -1,9 +1,11 @@
 import { LeuMenu } from './Menu.js';
 import 'lit';
-import './LeuElement-C0BZ_nPB.js';
+import './LeuElement-DlQXnrk8.js';
 import './MenuItem.js';
 import 'lit/directives/if-defined.js';
 import './Icon.js';
+import './_tslib-CNEFicEt.js';
+import 'lit/decorators.js';
 
 LeuMenu.define("leu-menu");
 

package/dist/leu-message.js

@@ -3,7 +3,7 @@ import './_tslib-CNEFicEt.js';
 import 'lit';
 import 'lit/decorators.js';
 import 'lit/directives/class-map.js';
-import './LeuElement-C0BZ_nPB.js';
+import './LeuElement-DlQXnrk8.js';
 import './Icon.js';
 import './hasSlotController-Bm2tipvG.js';
 

package/dist/leu-pagination.js

@@ -3,7 +3,7 @@ import './_tslib-CNEFicEt.js';
 import 'lit';
 import 'lit/directives/live.js';
 import 'lit/decorators.js';
-import './LeuElement-C0BZ_nPB.js';
+import './LeuElement-DlQXnrk8.js';
 import './Button.js';
 import 'lit/directives/class-map.js';
 import 'lit/directives/if-defined.js';

package/dist/leu-placeholder.js

@@ -1,6 +1,6 @@
 import { LeuPlaceholder } from './Placeholder.js';
 import 'lit';
-import './LeuElement-C0BZ_nPB.js';
+import './LeuElement-DlQXnrk8.js';
 
 LeuPlaceholder.define("leu-placeholder");
 

package/dist/leu-popup.js

@@ -1,7 +1,7 @@
 import { LeuPopup } from './Popup.js';
 import 'lit';
 import '@floating-ui/dom';
-import './LeuElement-C0BZ_nPB.js';
+import './LeuElement-DlQXnrk8.js';
 
 LeuPopup.define("leu-popup");
 

package/dist/leu-radio-group.js

@@ -3,7 +3,7 @@ import './_tslib-CNEFicEt.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 import 'lit/decorators.js';
-import './LeuElement-C0BZ_nPB.js';
+import './LeuElement-DlQXnrk8.js';
 import './Radio.js';
 
 LeuRadioGroup.define("leu-radio-group");

package/dist/leu-radio.js

@@ -2,7 +2,7 @@ import { LeuRadio } from './Radio.js';
 import './_tslib-CNEFicEt.js';
 import 'lit';
 import 'lit/decorators.js';
-import './LeuElement-C0BZ_nPB.js';
+import './LeuElement-DlQXnrk8.js';
 
 LeuRadio.define("leu-radio");
 

package/dist/leu-range.js

@@ -1,6 +1,6 @@
 import { LeuRange } from './Range.js';
 import 'lit';
-import './LeuElement-C0BZ_nPB.js';
+import './LeuElement-DlQXnrk8.js';
 
 LeuRange.define("leu-range");
 

package/dist/leu-scroll-top.js

@@ -1,7 +1,7 @@
 import { LeuScrollTop } from './ScrollTop.js';
 import 'lit';
 import 'lit/directives/class-map.js';
-import './LeuElement-C0BZ_nPB.js';
+import './LeuElement-DlQXnrk8.js';
 import './Button.js';
 import './_tslib-CNEFicEt.js';
 import 'lit/directives/if-defined.js';

package/dist/leu-select.js

@@ -3,7 +3,7 @@ import 'lit';
 import 'lit/directives/class-map.js';
 import 'lit/directives/ref.js';
 import 'lit/directives/if-defined.js';
-import './LeuElement-C0BZ_nPB.js';
+import './LeuElement-DlQXnrk8.js';
 import './hasSlotController-Bm2tipvG.js';
 import './Button.js';
 import './_tslib-CNEFicEt.js';

package/dist/leu-spinner.js

@@ -1,6 +1,6 @@
 import { LeuSpinner } from './Spinner.js';
 import 'lit';
-import './LeuElement-C0BZ_nPB.js';
+import './LeuElement-DlQXnrk8.js';
 
 LeuSpinner.define("leu-spinner");
 

package/dist/leu-table.js

@@ -3,12 +3,12 @@ import 'lit';
 import 'lit/directives/class-map.js';
 import 'lit/directives/style-map.js';
 import 'lit/directives/ref.js';
-import './LeuElement-C0BZ_nPB.js';
+import './LeuElement-DlQXnrk8.js';
 import './Icon.js';
-import './Pagination.js';
 import './_tslib-CNEFicEt.js';
-import 'lit/directives/live.js';
 import 'lit/decorators.js';
+import './Pagination.js';
+import 'lit/directives/live.js';
 import './Button.js';
 import 'lit/directives/if-defined.js';
 import './hasSlotController-Bm2tipvG.js';

package/dist/leu-tag.d.ts

@@ -0,0 +1,4 @@
+export { LeuTag } from './Tag.js';
+import 'lit-html';
+import 'lit';
+import './LeuElement.d-BevHqLUu.js';

package/dist/leu-tag.js

@@ -0,0 +1,9 @@
+import { LeuTag } from './Tag.js';
+import './_tslib-CNEFicEt.js';
+import 'lit';
+import 'lit/decorators.js';
+import './LeuElement-DlQXnrk8.js';
+
+LeuTag.define("leu-tag");
+
+export { LeuTag };

package/dist/leu-visually-hidden.js

@@ -1,6 +1,6 @@
 import { LeuVisuallyHidden } from './VisuallyHidden.js';
 import 'lit';
-import './LeuElement-C0BZ_nPB.js';
+import './LeuElement-DlQXnrk8.js';
 
 LeuVisuallyHidden.define("leu-visually-hidden");
 

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

@@ -304,7 +304,7 @@
         {
           "name": "name",
           "description": "The name of the icon to display.",
-          "values": [{ "name": "IconPathName" }]
+          "values": [{ "name": "IconPathName" }, { "name": "\"\"" }]
         }
       ],
       "references": [
@@ -754,6 +754,26 @@
         }
       ]
     },
+    {
+      "name": "leu-tag",
+      "description": "\n---\n\n\n### **Slots:**\n - **default** - The label of the tag\n- **icon** - An icon to display in the tag\n\n### **CSS Properties:**\n - **--leu-tag-accent-color** - The color of the tag _(default: undefined)_",
+      "attributes": [
+        {
+          "name": "variant",
+          "values": [
+            { "name": "solid" },
+            { "name": "outline" },
+            { "name": "ghost" }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://statistikzh.github.io/leu/?path=/story/tag"
+        }
+      ]
+    },
     {
       "name": "leu-visually-hidden",
       "description": "\n---\n",

package/dist/vue/index.d.ts

@@ -27,6 +27,7 @@ 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 { LeuTag } from "../Tag.js";
 import type { LeuVisuallyHidden } from "../VisuallyHidden.js";
 
 type LeuAccordionProps = {
@@ -449,6 +450,11 @@ type LeuTableProps = {
   _resizeObserver?: LeuTable["_resizeObserver"];
 };
 
+type LeuTagProps = {
+  /**  */
+  variant?: LeuTag["variant"];
+};
+
 type LeuVisuallyHiddenProps = {};
 
 export type CustomElements = {
@@ -759,6 +765,20 @@ export type CustomElements = {
    */
   "leu-table": DefineComponent<LeuTableProps>;
 
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - **default** - The label of the tag
+   * - **icon** - An icon to display in the tag
+   *
+   * ### **CSS Properties:**
+   *  - **--leu-tag-accent-color** - The color of the tag _(default: undefined)_
+   */
+  "leu-tag": DefineComponent<LeuTagProps>;
+
   /**
    *
    * ---

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.16.0",
+  "version": "0.18.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -603,7 +603,7 @@
             {
               "name": "name",
               "description": "The name of the icon to display.",
-              "value": { "type": "IconPathName", "default": "\"\"" }
+              "value": { "type": "IconPathName | \"\"", "default": "\"\"" }
             }
           ],
           "events": [],
@@ -1514,6 +1514,34 @@
             "events": []
           }
         },
+        {
+          "name": "leu-tag",
+          "description": "\n---\n\n\n### **Slots:**\n - **default** - The label of the tag\n- **icon** - An icon to display in the tag\n\n### **CSS Properties:**\n - **--leu-tag-accent-color** - The color of the tag _(default: undefined)_",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "variant",
+              "value": {
+                "type": "\"solid\" | \"outline\" | \"ghost\"",
+                "default": "\"solid\""
+              }
+            }
+          ],
+          "slots": [
+            { "name": "default", "description": "The label of the tag" },
+            { "name": "icon", "description": "An icon to display in the tag" }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "variant",
+                "type": "\"solid\" | \"outline\" | \"ghost\""
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "leu-visually-hidden",
           "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.16.0",
+  "version": "0.18.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/components/icon/Icon.ts

@@ -1,9 +1,10 @@
 import { html, svg } from "lit"
+import { property } from "lit/decorators.js"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
 import styles from "./icon.css"
-import { paths } from "./paths.js"
+import { paths, IconPathName } from "./paths.js"
 
 /**
  * A component to render all defined zhWeb icons.
@@ -12,7 +13,6 @@ import { paths } from "./paths.js"
  * If the icon name is not found, a placeholder will be displayed.
  *
  * @tagname leu-icon
- * @prop {import("./paths").IconPathName} name - The name of the icon to display.
  * @cssprop --leu-icon-size - The size of the icon.
  */
 export class LeuIcon extends LeuElement {
@@ -22,14 +22,11 @@ export class LeuIcon extends LeuElement {
     name: { type: String, reflect: true },
   }
 
-  constructor() {
-    super()
-
-    /**
-     * @type {import("./paths").IconPathName | ""}
-     */
-    this.name = ""
-  }
+  /**
+   * The name of the icon to display.
+   */
+  @property({ type: String, reflect: true })
+  name: IconPathName | "" = ""
 
   render() {
     if (!paths[this.name]) {