feat: foundations typography legend

.changeset/beige-jobs-do.md

@@ -0,0 +1,7 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+'@swisspost/design-system-tokens': minor
+---
+
+Added legend element.

packages/documentation/src/stories/elements/legend/legend.docs.mdx

@@ -0,0 +1,21 @@
+import { Meta, Canvas } from '@storybook/blocks';
+import * as LegendStories from './legend.stories';
+
+<Meta of={LegendStories} />
+
+<div className="docs-title">
+  # Legend
+  <nav>
+    <link-design of={JSON.stringify(LegendStories)}></link-design>
+  </nav>
+</div>
+
+A legend is in general the title of a group of related (interactive) elements in a form. Not to be confused with caption.
+
+### Default
+
+<Canvas of={LegendStories.Default} sourceState="shown" />
+
+### Large
+
+<Canvas of={LegendStories.Large} sourceState="shown" />

packages/documentation/src/stories/elements/legend/legend.stories.ts

@@ -0,0 +1,35 @@
+import type { StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import { MetaExtended } from '@root/types';
+
+const meta: MetaExtended = {
+  id: '61faccd2-de2c-48f0-9a06-c051a56580ef',
+  title: 'Foundations/Typography/Legend',
+  parameters: {
+    badges: [],
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=26-49',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () => html`
+    <fieldset>
+      <legend>Default legend</legend>
+    </fieldset>
+  `,
+};
+
+export const Large: Story = {
+  render: () => html`
+    <fieldset>
+      <legend class="legend-large">Large legend</legend>
+    </fieldset>
+  `,
+};

packages/styles/src/elements/_index.scss

@@ -1,3 +1,4 @@
 @use 'reset';
 @use 'body';
 @use 'heading';
+@use 'fieldset-legend';

packages/styles/src/elements/fieldset-legend.scss

@@ -0,0 +1,19 @@
+@use '../functions/tokens';
+@use '../tokens/elements';
+
+tokens.$default-map: elements.$post-legend;
+
+legend {
+  font-weight: tokens.get('legend', 'font-weight');
+  line-height: tokens.get('legend', 'line-height');
+  width: 100%;
+}
+
+.legend-large {
+  font-size: tokens.get('legend', 'large-font-size');
+  margin-block-start: tokens.get('legend', 'large-margin-block-start');
+  margin-block-end: tokens.get('legend', 'large-margin-block-end');
+  padding-block-end: tokens.get('legend', 'large-padding-block-end');
+
+  border-bottom: tokens.get('legend', 'large-border-bottom');
+}

packages/styles/src/elements/reset.scss

@@ -142,3 +142,12 @@ th {
   border-style: solid;
   border-width: 0;
 }
+
+fieldset,
+legend {
+  padding: 0;
+}
+
+fieldset {
+  border: 0;
+}