feat: add more vue components and stories

feat: add more vue components and stories

style: add secondary color tokens

docs(release): design system packages

 - @utrecht/components@1.0.0-alpha.450
 - @utrecht/icon@1.0.0-alpha.377
 - @utrecht/component-library-angular@1.0.0-alpha.268
 - @utrecht/component-library-css@1.0.0-alpha.489
 - @utrecht/component-library-formio@1.0.0-alpha.430
 - @utrecht/component-library-react@1.0.0-alpha.298
 - @utrecht/component-library-vue@1.0.0-alpha.266
 - @utrecht/web-component-library-angular@1.0.0-alpha.472
 - @utrecht/web-component-library-react@1.0.0-alpha.488
 - @utrecht/web-component-library-stencil@1.0.0-alpha.488
 - @utrecht/web-component-library-vue@1.0.0-alpha.434
 - @utrecht/assets@1.0.0-alpha.110
 - @utrecht/design-tokens@1.0.0-alpha.482

style: revert CSS overrides for Storybook doc pages

Essentially revert #1582, it is causing too many side effects

docs(release): design system packages

 - @utrecht/components@1.0.0-alpha.451
 - @utrecht/icon@1.0.0-alpha.378
 - @utrecht/component-library-angular@1.0.0-alpha.269
 - @utrecht/component-library-css@1.0.0-alpha.490
 - @utrecht/component-library-formio@1.0.0-alpha.431
 - @utrecht/component-library-react@1.0.0-alpha.299
 - @utrecht/component-library-vue@1.0.0-alpha.267
 - @utrecht/web-component-library-angular@1.0.0-alpha.473
 - @utrecht/web-component-library-react@1.0.0-alpha.489
 - @utrecht/web-component-library-stencil@1.0.0-alpha.489
 - @utrecht/web-component-library-vue@1.0.0-alpha.435
 - @utrecht/assets@1.0.0-alpha.111
 - @utrecht/design-tokens@1.0.0-alpha.483

build: update npm-check-updates first

raineorshine/npm-check-updates#1268

build: install patch updates

chore: `import-order` lint fixes

build: remove Stencil patch for CSP (Stencil 3 has out of the box support)

chore: fix markdown lint warnings

build: update minor versions

build: avoid `@vue/tsconfig` 0.2.0 and greater, requires TypeScript 5

docs(release): design system packages

 - @utrecht/components@1.0.0-alpha.452
 - @utrecht/icon@1.0.0-alpha.379
 - @utrecht/component-library-angular@1.0.0-alpha.270
 - @utrecht/component-library-css@1.0.0-alpha.491
 - @utrecht/component-library-formio@1.0.0-alpha.432
 - @utrecht/component-library-react@1.0.0-alpha.300
 - @utrecht/component-library-vue@1.0.0-alpha.268
 - @utrecht/web-component-library-angular@1.0.0-alpha.474
 - @utrecht/web-component-library-react@1.0.0-alpha.490
 - @utrecht/web-component-library-stencil@1.0.0-alpha.490
 - @utrecht/web-component-library-vue@1.0.0-alpha.436
 - @utrecht/assets@1.0.0-alpha.112
 - @utrecht/design-tokens@1.0.0-alpha.484

feat: new token voor line height

style: add `form-control` fallback for textbox line height

docs(release): design system packages

 - @utrecht/components@1.0.0-alpha.453
 - @utrecht/icon@1.0.0-alpha.380
 - @utrecht/component-library-angular@1.0.0-alpha.271
 - @utrecht/component-library-css@1.0.0-alpha.492
 - @utrecht/component-library-formio@1.0.0-alpha.433
 - @utrecht/component-library-react@1.0.0-alpha.301
 - @utrecht/component-library-vue@1.0.0-alpha.269
 - @utrecht/web-component-library-angular@1.0.0-alpha.475
 - @utrecht/web-component-library-react@1.0.0-alpha.491
 - @utrecht/web-component-library-stencil@1.0.0-alpha.491
 - @utrecht/web-component-library-vue@1.0.0-alpha.437
 - @utrecht/assets@1.0.0-alpha.113
 - @utrecht/design-tokens@1.0.0-alpha.485

feat: opencatalogi databadge designtokens

fix: linting voor data-badge

docs(release): design system packages

 - @utrecht/components@1.0.0-alpha.454
 - @utrecht/icon@1.0.0-alpha.381
 - @utrecht/component-library-angular@1.0.0-alpha.272
 - @utrecht/component-library-css@1.0.0-alpha.493
 - @utrecht/component-library-formio@1.0.0-alpha.434
 - @utrecht/component-library-react@1.0.0-alpha.302
 - @utrecht/component-library-vue@1.0.0-alpha.270
 - @utrecht/web-component-library-angular@1.0.0-alpha.476
 - @utrecht/web-component-library-react@1.0.0-alpha.492
 - @utrecht/web-component-library-stencil@1.0.0-alpha.492
 - @utrecht/web-component-library-vue@1.0.0-alpha.438
 - @utrecht/assets@1.0.0-alpha.114
 - @utrecht/design-tokens@1.0.0-alpha.486

docs: add WCAG 1280x1024px at 400% zoom viewport to Storybook

docs: improve skip link docs

docs(release): design system packages

 - @utrecht/components@1.0.0-alpha.455
 - @utrecht/icon@1.0.0-alpha.382
 - @utrecht/component-library-angular@1.0.0-alpha.273
 - @utrecht/component-library-css@1.0.0-alpha.494
 - @utrecht/component-library-formio@1.0.0-alpha.435
 - @utrecht/component-library-react@1.0.0-alpha.303
 - @utrecht/component-library-vue@1.0.0-alpha.271
 - @utrecht/web-component-library-angular@1.0.0-alpha.477
 - @utrecht/web-component-library-react@1.0.0-alpha.493
 - @utrecht/web-component-library-stencil@1.0.0-alpha.493
 - @utrecht/web-component-library-vue@1.0.0-alpha.439
 - @utrecht/assets@1.0.0-alpha.115
 - @utrecht/design-tokens@1.0.0-alpha.487

style: support design tokens in `::selection`

https://kilianvalkhof.com/2023/css-html/root-isnt-global/

docs(release): design system packages

 - @utrecht/components@1.0.0-alpha.456
 - @utrecht/icon@1.0.0-alpha.383
 - @utrecht/component-library-angular@1.0.0-alpha.274
 - @utrecht/component-library-css@1.0.0-alpha.495
 - @utrecht/component-library-formio@1.0.0-alpha.436
 - @utrecht/component-library-react@1.0.0-alpha.304
 - @utrecht/component-library-vue@1.0.0-alpha.272
 - @utrecht/web-component-library-angular@1.0.0-alpha.478
 - @utrecht/web-component-library-react@1.0.0-alpha.494
 - @utrecht/web-component-library-stencil@1.0.0-alpha.494
 - @utrecht/web-component-library-vue@1.0.0-alpha.440
 - @utrecht/assets@1.0.0-alpha.116
 - @utrecht/design-tokens@1.0.0-alpha.488

feat: allow unselected date and keep date when navigating months

docs(release): design system packages

 - @utrecht/components@1.0.0-alpha.457
 - @utrecht/icon@1.0.0-alpha.384
 - @utrecht/component-library-angular@1.0.0-alpha.275
 - @utrecht/component-library-css@1.0.0-alpha.496
 - @utrecht/component-library-formio@1.0.0-alpha.437
 - @utrecht/component-library-react@1.0.0-alpha.305
 - @utrecht/component-library-vue@1.0.0-alpha.273
 - @utrecht/web-component-library-angular@1.0.0-alpha.479
 - @utrecht/web-component-library-react@1.0.0-alpha.495
 - @utrecht/web-component-library-stencil@1.0.0-alpha.495
 - @utrecht/web-component-library-vue@1.0.0-alpha.441
 - @utrecht/assets@1.0.0-alpha.117
 - @utrecht/design-tokens@1.0.0-alpha.489

docs: make CSS tokens example simpler to uncomment one token at a time

docs(release): design system packages

 - @utrecht/components@1.0.0-alpha.458
 - @utrecht/icon@1.0.0-alpha.385
 - @utrecht/component-library-angular@1.0.0-alpha.276
 - @utrecht/component-library-css@1.0.0-alpha.497
 - @utrecht/component-library-formio@1.0.0-alpha.438
 - @utrecht/component-library-react@1.0.0-alpha.306
 - @utrecht/component-library-vue@1.0.0-alpha.274
 - @utrecht/web-component-library-angular@1.0.0-alpha.480
 - @utrecht/web-component-library-react@1.0.0-alpha.496
 - @utrecht/web-component-library-stencil@1.0.0-alpha.496
 - @utrecht/web-component-library-vue@1.0.0-alpha.442
 - @utrecht/assets@1.0.0-alpha.118
 - @utrecht/design-tokens@1.0.0-alpha.490

style: active state for buttons

style: use `:active` after `:focus` and avoid `:link`

docs(release): design system packages

 - @utrecht/components@1.0.0-alpha.459
 - @utrecht/icon@1.0.0-alpha.386
 - @utrecht/component-library-angular@1.0.0-alpha.277
 - @utrecht/component-library-css@1.0.0-alpha.498
 - @utrecht/component-library-formio@1.0.0-alpha.439
 - @utrecht/component-library-react@1.0.0-alpha.307
 - @utrecht/component-library-vue@1.0.0-alpha.275
 - @utrecht/web-component-library-angular@1.0.0-alpha.481
 - @utrecht/web-component-library-react@1.0.0-alpha.497
 - @utrecht/web-component-library-stencil@1.0.0-alpha.497
 - @utrecht/web-component-library-vue@1.0.0-alpha.443
 - @utrecht/assets@1.0.0-alpha.119
 - @utrecht/design-tokens@1.0.0-alpha.491

fix: revert "support design tokens in `::selection`"

This reverts commit fb62efe.

Unfortunately the following code makes the user selection invisible:

```
::selection {
    --color: red;
}
```

Somehow, only having a custom property, breaks `background-color` and
`color`. This totally works:

```
::selection {
    --color: red;
    background-color: Highlight;
    color: HighlightText;
}
```

However, the following would not be our intention:

```
.utrecht-theme,
.utrecht-theme ::selection {
    --color: red;
    background-color: Highlight;
    color: HighlightText;
}
```

Perhaps we could do the following, but I doubt it would be worth the complexity.

```
.utrecht-theme,
.utrecht-theme ::selection {
    --color: red;
}

.utrecht-theme ::selection {
    background-color: Highlight;
    color: HighlightText;
}
```

docs(release): design system packages

 - @utrecht/components@1.0.0-alpha.460
 - @utrecht/icon@1.0.0-alpha.387
 - @utrecht/component-library-angular@1.0.0-alpha.278
 - @utrecht/component-library-css@1.0.0-alpha.499
 - @utrecht/component-library-formio@1.0.0-alpha.440
 - @utrecht/component-library-react@1.0.0-alpha.308
 - @utrecht/component-library-vue@1.0.0-alpha.276
 - @utrecht/web-component-library-angular@1.0.0-alpha.482
 - @utrecht/web-component-library-react@1.0.0-alpha.498
 - @utrecht/web-component-library-stencil@1.0.0-alpha.498
 - @utrecht/web-component-library-vue@1.0.0-alpha.444
 - @utrecht/assets@1.0.0-alpha.120
 - @utrecht/design-tokens@1.0.0-alpha.492

style: add `text-style-adjust: reset`

Inspired by: Your CSS reset needs text-size-adjust (probably)

https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/

style: add `font-size: inherit` fallback to form inputs

style: explicitly use `user-select: none` on form components

feat: add selected state for table row and cells

style: use `Hightlight` and `HightlightText` as fallback selected style

style: `<th>` should be bold, even without design tokens

docs: add theme switcher to React Storybook

Dark mode is broken still, will look into it later

docs(release): design system packages

 - @utrecht/components@1.0.0-alpha.461
 - @utrecht/icon@1.0.0-alpha.388
 - @utrecht/component-library-angular@1.0.0-alpha.279
 - @utrecht/component-library-css@1.0.0-alpha.500
 - @utrecht/component-library-formio@1.0.0-alpha.441
 - @utrecht/component-library-react@1.0.0-alpha.309
 - @utrecht/component-library-vue@1.0.0-alpha.277
 - @utrecht/web-component-library-angular@1.0.0-alpha.483
 - @utrecht/web-component-library-react@1.0.0-alpha.499
 - @utrecht/web-component-library-stencil@1.0.0-alpha.499
 - @utrecht/web-component-library-vue@1.0.0-alpha.445
 - @utrecht/assets@1.0.0-alpha.121
 - @utrecht/design-tokens@1.0.0-alpha.493

fix: accordion tokens fixed

feat: add new interactive state tokens for checked radio

refactor: reuse radio button icon svg

fix: use `defaultChecked` instead of `checked`

feat: support styling radio button icon

docs: radio button design guidelines

fix: radio button group `name` and `id` attributes

docs(release): design system packages

 - @utrecht/components@1.0.0-alpha.462
 - @utrecht/icon@1.0.0-alpha.389
 - @utrecht/component-library-angular@1.0.0-alpha.280
 - @utrecht/component-library-css@1.0.0-alpha.501
 - @utrecht/component-library-formio@1.0.0-alpha.442
 - @utrecht/component-library-react@1.0.0-alpha.310
 - @utrecht/component-library-vue@1.0.0-alpha.278
 - @utrecht/web-component-library-angular@1.0.0-alpha.484
 - @utrecht/web-component-library-react@1.0.0-alpha.500
 - @utrecht/web-component-library-stencil@1.0.0-alpha.500
 - @utrecht/web-component-library-vue@1.0.0-alpha.446
 - @utrecht/assets@1.0.0-alpha.122
 - @utrecht/design-tokens@1.0.0-alpha.494

docs: color sample docs

feat: add `border-radius` token to color sample component

style: prevent selection in Safari too

feat: color sample web component

test: unit tests for React ColorSample component

feat: color sample component for Angular

feat: add size tokens to color sample

style: ensure color sample can be printed

docs(release): design system packages

 - @utrecht/components@1.0.0-alpha.463
 - @utrecht/icon@1.0.0-alpha.390
 - @utrecht/component-library-angular@1.0.0-alpha.281
 - @utrecht/component-library-css@1.0.0-alpha.502
 - @utrecht/component-library-formio@1.0.0-alpha.443
 - @utrecht/component-library-react@1.0.0-alpha.311
 - @utrecht/component-library-vue@1.0.0-alpha.279
 - @utrecht/web-component-library-angular@1.0.0-alpha.485
 - @utrecht/web-component-library-react@1.0.0-alpha.501
 - @utrecht/web-component-library-stencil@1.0.0-alpha.501
 - @utrecht/web-component-library-vue@1.0.0-alpha.447
 - @utrecht/assets@1.0.0-alpha.123
 - @utrecht/design-tokens@1.0.0-alpha.495

fix: use `aria-label` instead of `title` for links

docs: some more WCAG links

docs: examples of how to use form-field-description

ci: disable `react/no-unescaped-entities` lint rule

The suggestion might prevent a bug sometimes, but MDX docs become unreadable.

docs(release): design system packages

 - @utrecht/components@1.0.0-alpha.464
 - @utrecht/icon@1.0.0-alpha.391
 - @utrecht/component-library-angular@1.0.0-alpha.282
 - @utrecht/component-library-css@1.0.0-alpha.503
 - @utrecht/component-library-formio@1.0.0-alpha.444
 - @utrecht/component-library-react@1.0.0-alpha.312
 - @utrecht/component-library-vue@1.0.0-alpha.280
 - @utrecht/web-component-library-angular@1.0.0-alpha.486
 - @utrecht/web-component-library-react@1.0.0-alpha.502
 - @utrecht/web-component-library-stencil@1.0.0-alpha.502
 - @utrecht/web-component-library-vue@1.0.0-alpha.448
 - @utrecht/assets@1.0.0-alpha.124
 - @utrecht/design-tokens@1.0.0-alpha.496

feat: add min and max date bounds

docs: add story for limited range calendar

test: add calendar tests

docs(release): design system packages

 - @utrecht/components@1.0.0-alpha.465
 - @utrecht/icon@1.0.0-alpha.392
 - @utrecht/component-library-angular@1.0.0-alpha.283
 - @utrecht/component-library-css@1.0.0-alpha.504
 - @utrecht/component-library-formio@1.0.0-alpha.445
 - @utrecht/component-library-react@1.0.0-alpha.313
 - @utrecht/component-library-vue@1.0.0-alpha.281
 - @utrecht/web-component-library-angular@1.0.0-alpha.487
 - @utrecht/web-component-library-react@1.0.0-alpha.503
 - @utrecht/web-component-library-stencil@1.0.0-alpha.503
 - @utrecht/web-component-library-vue@1.0.0-alpha.449
 - @utrecht/assets@1.0.0-alpha.125
 - @utrecht/design-tokens@1.0.0-alpha.497

style: avoid oversized SVG icons

docs: icon story for CSS icon component

docs(release): design system packages

 - @utrecht/components@1.0.0-alpha.466
 - @utrecht/icon@1.0.0-alpha.393
 - @utrecht/component-library-angular@1.0.0-alpha.284
 - @utrecht/component-library-css@1.0.0-alpha.505
 - @utrecht/component-library-formio@1.0.0-alpha.446
 - @utrecht/component-library-react@1.0.0-alpha.314
 - @utrecht/component-library-vue@1.0.0-alpha.282
 - @utrecht/web-component-library-angular@1.0.0-alpha.488
 - @utrecht/web-component-library-react@1.0.0-alpha.504
 - @utrecht/web-component-library-stencil@1.0.0-alpha.504
 - @utrecht/web-component-library-vue@1.0.0-alpha.450
 - @utrecht/assets@1.0.0-alpha.126
 - @utrecht/design-tokens@1.0.0-alpha.498

packages/component-library-vue/src/Emphasis.vue

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { defineComponent } from "vue";
+
+  export default defineComponent({
+    name: "UtrechtEmphasis",
+  });
+</script>
+
+<template>
+  <em v-bind="$attrs" class="utrecht-emphasis utrecht-emphasis--stressed">
+    <slot></slot>
+  </em>
+</template>
+
+<style src="@utrecht/components/emphasis/css/index.scss"></style>

packages/component-library-vue/src/Figure.vue

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { defineComponent } from "vue";
+
+  export default defineComponent({
+    name: "UtrechtFigure",
+  });
+</script>
+
+<template>
+  <figure v-bind="$attrs" class="utrecht-figure">
+    <slot></slot>
+  </figure>
+</template>
+
+<style src="@utrecht/components/figure/css/index.scss"></style>

packages/component-library-vue/src/FigureCaption.vue

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { defineComponent } from "vue";
+
+  export default defineComponent({
+    name: "UtrechtFigureCaption",
+  });
+</script>
+
+<template>
+  <figcaption v-bind="$attrs" class="utrecht-figure__caption">
+    <slot></slot>
+  </figcaption>
+</template>
+
+<style src="@utrecht/components/figure/css/index.scss"></style>

packages/component-library-vue/src/Image.vue

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { defineComponent } from "vue";
+
+  export default defineComponent({
+    name: "UtrechtImage",
+    props: {
+      photo: {
+        type: Boolean,
+        default: false,
+        required: false,
+      },
+    },
+  });
+</script>
+
+<template>
+  <img
+    class="utrecht-img"
+    v-bind="$attrs"
+    :class="{'utrecht-img--photo': photo}"
+    :alt="$attrs?.alt"
+    :src="$attrs.src"
+    :height="$attrs?.height"
+    :width="$attrs?.width"
+  />
+</template>
+
+<style src="@utrecht/components/figure/css/index.scss"></style>

packages/component-library-vue/src/LinkSocial.vue

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { defineComponent } from "vue";
+
+  export default defineComponent({
+    name: "UtrechtLinkSocial",
+    props: {
+      external: {
+        type: Boolean,
+        default: false,
+        required: false,
+      },
+    },
+  });
+</script>
+
+<template>
+  <a class="utrecht-link-social" v-bind="$attrs" :rel="external !== false ? 'external noopener noreferrer' : undefined">
+    <slot></slot>
+  </a>
+</template>
+
+<style src="@utrecht/components/link-social/css/index.scss"></style>

packages/component-library-vue/src/ListSocial.vue

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { defineComponent } from "vue";
+
+  export default defineComponent({
+    name: "UtrechtListSocial",
+    props: {
+      external: {
+        type: Boolean,
+        default: false,
+        required: false,
+      },
+    },
+  });
+</script>
+
+<template>
+  <ul class="utrecht-list-social" v-bind="$attrs">
+    <slot></slot>
+  </ul>
+</template>
+
+<style src="@utrecht/components/list-social/css/index.scss"></style>

packages/component-library-vue/src/ListSocialItem.vue

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { defineComponent } from "vue";
+
+  export default defineComponent({
+    name: "UtrechtListSocialItem",
+  });
+</script>
+
+<template>
+  <li class="utrecht-list-social__item" v-bind="$attrs">
+    <slot></slot>
+  </li>
+</template>
+
+<style src="@utrecht/components/list-social/css/index.scss"></style>

packages/component-library-vue/src/OrderedList.vue

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { defineComponent } from "vue";
+
+  export default defineComponent({
+    name: "UtrechtOrderedList",
+  });
+</script>
+
+<template>
+  <ol class="utrecht-ordered-list" v-bind="$attrs">
+    <slot></slot>
+  </ol>
+</template>
+
+<style src="@utrecht/components/ordered-list/css/index.scss"></style>

packages/component-library-vue/src/OrderedListItem.vue

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { defineComponent } from "vue";
+
+  export default defineComponent({
+    name: "UtrechtOrderedListItem",
+  });
+</script>
+
+<template>
+  <li class="utrecht-ordered-list__item" v-bind="$attrs">
+    <slot></slot>
+  </li>
+</template>
+
+<style src="@utrecht/components/ordered-list/css/index.scss"></style>

packages/component-library-vue/src/Separator.vue

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { defineComponent } from "vue";
+
+  export default defineComponent({
+    name: "UtrechtSeparator",
+  });
+</script>
+
+<template>
+  <hr class="utrecht-separator" v-bind="$attrs" />
+</template>
+
+<style src="@utrecht/components/separator/css/index.scss"></style>

packages/component-library-vue/src/SkipLink.vue

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { defineComponent } from "vue";
+
+  export default defineComponent({
+    name: "UtrechtSkipLink",
+    props: {
+      href: {
+        type: String,
+        default: undefined,
+        required: false,
+      },
+    },
+  });
+</script>
+
+<template>
+  <p>
+    <a v-bind="$attrs" :href="$props.href" class="utrecht-skip-link utrecht-skip-link--visible-on-focus">
+      <slot></slot>
+    </a>
+  </p>
+</template>
+
+<style src="@utrecht/components/skip-link/css/index.scss"></style>

packages/component-library-vue/src/Strong.vue

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { defineComponent } from "vue";
+
+  export default defineComponent({
+    name: "UtrechtStrong",
+  });
+</script>
+
+<template>
+  <strong v-bind="$attrs" class="utrecht-emphasis utrecht-emphasis--strong">
+    <slot></slot>
+  </strong>
+</template>
+
+<style src="@utrecht/components/skip-link/css/index.scss"></style>

packages/component-library-vue/src/UnorderedList.vue

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { defineComponent } from "vue";
+
+  export default defineComponent({
+    name: "UtrechtUnorderedList",
+  });
+</script>
+
+<template>
+  <ol class="utrecht-unordered-list" v-bind="$attrs">
+    <slot></slot>
+  </ol>
+</template>
+
+<style src="@utrecht/components/unordered-list/css/index.scss"></style>

packages/component-library-vue/src/UnorderedListItem.vue

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { defineComponent } from "vue";
+
+  export default defineComponent({
+    name: "UtrechtOrderedListItem",
+  });
+</script>
+
+<template>
+  <li class="utrecht-ordered-list__item" v-bind="$attrs">
+    <slot></slot>
+  </li>
+</template>
+
+<style src="@utrecht/components/ordered-list/css/index.scss"></style>

packages/component-library-vue/src/helpers/uniqueId.ts

@@ -0,0 +1,5 @@
+import { ref } from 'vue';
+
+export const useId = (prefix = 'id') => {
+  return ref(`${prefix}-${Math.random().toString(36).substring(2, 11)}`);
+};

packages/component-library-vue/src/index.ts

@@ -4,6 +4,9 @@ export { default as Button } from './Button.vue';
 export { default as ButtonGroup } from './ButtonGroup.vue';
 export { default as Checkbox } from './Checkbox.vue';
 export { default as Document } from './Document.vue';
+export { default as Emphasis } from './Emphasis.vue';
+export { default as Figure } from './Figure.vue';
+export { default as FigureCaption } from './FigureCaption.vue';
 export { default as FormField } from './FormField.vue';
 export { default as FormFieldset } from './FormFieldset.vue';
 export { default as FormFieldsetLegend } from './FormFieldsetLegend.vue';
@@ -15,14 +18,23 @@ export { default as Heading3 } from './Heading3.vue';
 export { default as Heading4 } from './Heading4.vue';
 export { default as Heading5 } from './Heading5.vue';
 export { default as Heading6 } from './Heading6.vue';
+export { default as Image } from './Image.vue';
 export { default as Link } from './Link.vue';
+export { default as LinkSocial } from './LinkSocial.vue';
+export { default as ListSocial } from './ListSocial.vue';
+export { default as ListSocialItem } from './ListSocialItem.vue';
+export { default as OrderedList } from './OrderedList.vue';
+export { default as OrderedListItem } from './OrderedListItem.vue';
 export { default as Page } from './Page.vue';
 export { default as PageContent } from './PageContent.vue';
 export { default as PageFooter } from './PageFooter.vue';
 export { default as PageHeader } from './PageHeader.vue';
 export { default as Paragraph } from './Paragraph.vue';
 export { default as RadioButton } from './RadioButton.vue';
 export { default as Select } from './Select.vue';
+export { default as Separator } from './Separator.vue';
+export { default as SkipLink } from './SkipLink.vue';
+export { default as Strong } from './Strong.vue';
 export { default as Table } from './Table.vue';
 export { default as TableBody } from './TableBody.vue';
 export { default as TableCaption } from './TableCaption.vue';
@@ -33,3 +45,5 @@ export { default as TableHeaderCell } from './TableHeaderCell.vue';
 export { default as TableRow } from './TableRow.vue';
 export { default as Textarea } from './Textarea.vue';
 export { default as Textbox } from './Textbox.vue';
+export { default as UnorderedList } from './UnorderedList.vue';
+export { default as UnorderedListItem } from './UnorderedListItem.vue';

packages/component-library-vue/src/interfaces/Section.ts

@@ -0,0 +1,6 @@
+export interface Section {
+  id: string;
+  title: string;
+  active: boolean;
+  expanded: boolean;
+}

packages/storybook-vue/config/preview.jsx

@@ -1,18 +1,17 @@
 import { addonStatus } from '@utrecht/storybook-helpers/src/addon-status';
 import { addonViewport } from '@utrecht/storybook-helpers/src/addon-viewport';
-// import { withTests } from '@storybook/addon-jest';
-// import results from '@utrecht/component-library-vue/dist/.jest-test-results.json';
 import '@utrecht/component-library-vue/dist/style.css';
 import '@utrecht/design-tokens/dist/index.css';
 import '@utrecht/storybook-helpers/src/storybook-docs.scss';
-// import React from 'react';
+import { defineCustomElements } from '@utrecht/web-component-library-stencil/loader';
+
+defineCustomElements();
 
 export const decorators = [
   (story) => ({
     components: { story },
     template: '<div class="utrecht-theme"><story /></div>',
   }),
-  // withTests({ results }),
 ];
 
 export const parameters = {

packages/storybook-vue/package.json

@@ -32,6 +32,8 @@
     "@storybook/vue3-vite": "7.0.7",
     "@types/node": "18.16.3",
     "@utrecht/component-library-vue": "workspace:*",
+    "@utrecht/web-component-library-vue": "workspace:*",
+    "@utrecht/web-component-library-stencil": "workspace:*",
     "@utrecht/components": "workspace:*",
     "@utrecht/design-tokens": "workspace:*",
     "@utrecht/documentation": "workspace:*",

packages/storybook-vue/src/stories/Emphasis.stories.ts

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { Emphasis, Paragraph } from '@utrecht/component-library-vue';
+import readme from '@utrecht/components/emphasis/README.md?raw';
+import tokens from '@utrecht/components/emphasis/tokens.json';
+import { createStory } from './util';
+
+const meta: Meta<typeof Emphasis> = {
+  id: 'vue-emphasis',
+  title: 'Vue.js Component/Emphasis',
+  component: Emphasis,
+  tags: ['autodocs'],
+  argTypes: {
+    slot: {
+      name: 'slot',
+      control: { type: 'text' },
+      type: { required: false },
+      table: {
+        defaultValue: { summary: '' },
+      },
+    },
+  },
+  render: () => ({
+    components: { Emphasis, Paragraph },
+    template: `<Emphasis v-bind="$props"><slot></slot></Emphasis>`,
+  }),
+  parameters: {
+    status: {
+      type: 'ALPHA',
+    },
+    tokens,
+    tokenPrefix: 'utrecht-emphasis',
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = createStory(meta, {
+  name: 'Emphasis',
+  args: {
+    slot: 'Hello World!',
+  },
+});