@statistikzh/leu 0.16.0 → 0.17.0

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-BRZYxDjR.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-BRZYxDjR.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-BRZYxDjR.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-BRZYxDjR.js';
 
 LeuChipLink.define("leu-chip-link");
 

package/dist/leu-chip-removable.js

@@ -1,7 +1,7 @@
 import { LeuChipRemovable } from './ChipRemovable.js';
 import 'lit';
 import './Chip.js';
-import './LeuElement-C0BZ_nPB.js';
+import './LeuElement-BRZYxDjR.js';
 import './Icon.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-BRZYxDjR.js';
 
 LeuChipSelectable.define("leu-chip-selectable");
 

package/dist/leu-dialog.js

@@ -2,7 +2,7 @@ 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-BRZYxDjR.js';
 import './hasSlotController-Bm2tipvG.js';
 import './Icon.js';
 

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-BRZYxDjR.js';
 import './hasSlotController-Bm2tipvG.js';
 import './Button.js';
 import './_tslib-CNEFicEt.js';

package/dist/leu-icon.js

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

package/dist/leu-input.js

@@ -4,7 +4,7 @@ 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-BRZYxDjR.js';
 import './Icon.js';
 
 LeuInput.define("leu-input");

package/dist/leu-menu-item.js

@@ -1,7 +1,7 @@
 import { LeuMenuItem } from './MenuItem.js';
 import 'lit';
 import 'lit/directives/if-defined.js';
-import './LeuElement-C0BZ_nPB.js';
+import './LeuElement-BRZYxDjR.js';
 import './Icon.js';
 
 LeuMenuItem.define("leu-menu-item");

package/dist/leu-menu.js

@@ -1,6 +1,6 @@
 import { LeuMenu } from './Menu.js';
 import 'lit';
-import './LeuElement-C0BZ_nPB.js';
+import './LeuElement-BRZYxDjR.js';
 import './MenuItem.js';
 import 'lit/directives/if-defined.js';
 import './Icon.js';

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-BRZYxDjR.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-BRZYxDjR.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-BRZYxDjR.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-BRZYxDjR.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-BRZYxDjR.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-BRZYxDjR.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-BRZYxDjR.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-BRZYxDjR.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-BRZYxDjR.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-BRZYxDjR.js';
 
 LeuSpinner.define("leu-spinner");
 

package/dist/leu-table.js

@@ -3,7 +3,7 @@ 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-BRZYxDjR.js';
 import './Icon.js';
 import './Pagination.js';
 import './_tslib-CNEFicEt.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-BRZYxDjR.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-BRZYxDjR.js';
 
 LeuVisuallyHidden.define("leu-visually-hidden");
 

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

@@ -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.17.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -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.17.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/components/tag/Tag.ts

@@ -0,0 +1,28 @@
+import { html } from "lit"
+import { property } from "lit/decorators.js"
+
+import { LeuElement } from "../../lib/LeuElement.js"
+
+import styles from "./tag.css"
+
+/**
+ * @tagname leu-tag
+ * @cssprop --leu-tag-accent-color - The color of the tag
+ * @slot default - The label of the tag
+ * @slot icon - An icon to display in the tag
+ */
+export class LeuTag extends LeuElement {
+  static styles = [LeuElement.styles, styles]
+
+  @property({ type: String })
+  variant: "solid" | "outline" | "ghost" = "solid"
+
+  render() {
+    return html`
+      <div class="tag tag--${this.variant}">
+        <slot class="tag__icon" name="icon"></slot>
+        <slot class="tag__label"></slot>
+      </div>
+    `
+  }
+}

package/src/components/tag/leu-tag.ts

@@ -0,0 +1,5 @@
+import { LeuTag } from "./Tag.js"
+
+export { LeuTag }
+
+LeuTag.define("leu-tag")

package/src/components/tag/stories/tag.stories.ts

@@ -0,0 +1,107 @@
+import { Meta, StoryObj } from "@storybook/web-components"
+import { html } from "lit"
+import { ifDefined } from "lit/directives/if-defined.js"
+
+import "../leu-tag.js"
+import "../../icon/leu-icon.js"
+import { LeuTag } from "../Tag.js"
+
+import { paths as iconPaths } from "../../icon/paths.js"
+
+type StoryArgs = LeuTag
+type Story = StoryObj<StoryArgs>
+
+export default {
+  title: "Components/Tag",
+  component: "leu-tag",
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/design/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?node-id=21161-184432&t=QMYWpoD4FMWFrUkK-11",
+    },
+  },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["solid", "outline", "ghost"],
+    },
+    "--leu-tag-accent-color": {
+      control: {
+        type: "color",
+        presetColors: [
+          "#0076bd",
+          "#00407c",
+          "#00797b",
+          "#1a7f1f",
+          "#b01657",
+          "#d40053",
+          "#7f3da7",
+          "#666666",
+          "#009ee0",
+          "#d93c1a",
+          "#1a7f1f",
+        ],
+      },
+    },
+    icon: { control: "select", options: Object.keys(iconPaths) },
+  },
+  args: {
+    variant: "solid",
+    icon: "confirm",
+    default: "Abgeschlossen",
+    "--leu-tag-accent-color": "#7f3da7",
+  },
+} satisfies Meta<StoryArgs>
+
+const Template: Story = {
+  render: (args: StoryArgs) =>
+    html` <leu-tag
+      variant=${ifDefined(args.variant)}
+      style="--leu-tag-accent-color: ${args["--leu-tag-accent-color"] ??
+      "unset"}"
+    >
+      ${args.icon
+        ? html`<leu-icon slot="icon" name=${args.icon}></leu-icon>`
+        : ""}
+      ${args.default}</leu-tag
+    >`,
+}
+
+export const Solid = {
+  ...Template,
+  args: {
+    variant: "solid",
+  },
+}
+
+export const Outline = {
+  ...Template,
+  args: {
+    variant: "outline",
+  },
+}
+
+export const Ghost = {
+  ...Template,
+  args: {
+    variant: "ghost",
+  },
+}
+
+export const Warning = {
+  ...Template,
+  args: {
+    variant: "solid",
+    "--leu-tag-accent-color": "#d93c1a",
+    default: "Abgelaufen",
+  },
+}
+
+export const NoIcon = {
+  ...Template,
+  args: {
+    variant: "solid",
+    "--leu-tag-accent-color": "#7f3da7",
+    icon: undefined,
+  },
+}

package/src/components/tag/tag.css

@@ -0,0 +1,42 @@
+:host {
+  /* --tag-font-regular: var(--leu-font-family-regular);
+  --tag-font-black: var(--leu-font-family-black);
+
+  font-family: var(--tag-font-regular); */
+}
+
+.tag {
+  --_accent-color: var(--leu-tag-accent-color, var(--leu-color-black-60));
+
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.5rem;
+  gap: 0.25rem;
+  border-radius: 0.25rem;
+
+  background-color: var(--_accent-color);
+  border: 2px solid var(--_accent-color);
+  color: var(--leu-color-black-0);
+}
+
+.tag--outline {
+  background-color: transparent;
+  border-color: var(--_accent-color);
+  color: var(--_accent-color);
+}
+
+.tag--ghost {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--_accent-color);
+}
+
+.tag__icon {
+  --leu-icon-size: 1rem;
+}
+
+.tag__label {
+  display: block;
+  font: var(--leu-t-tiny-regular-font);
+  line-height: 1rem;
+}

package/src/components/tag/test/tag.test.ts

@@ -0,0 +1,28 @@
+import { html } from "lit"
+import { fixture, expect } from "@open-wc/testing"
+
+import "../leu-tag.js"
+
+async function defaultFixture() {
+  return fixture(html`<leu-tag>Abgeschlossen</leu-tag>`)
+}
+
+describe("LeuTag", () => {
+  it("is a defined element", async () => {
+    const el = customElements.get("leu-tag")
+
+    expect(el).not.to.be.undefined
+  })
+
+  it("passes the a11y audit", async () => {
+    const el = await defaultFixture()
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+
+  it("renders with default slot content", async () => {
+    const el = await defaultFixture()
+
+    expect(el).to.have.trimmed.text("Abgeschlossen")
+  })
+})