@rijkshuisstijl-community/components-css 1.0.0-alpha.8 → 1.0.0-alpha.81

package/src/link/_mixin.scss

@@ -0,0 +1,38 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+
+@mixin rhc-link--any-link {
+  --utrecht-icon-inset-block-start: var(--utrecht-link-icon-inset-block-start, inherit);
+
+  column-gap: var(--utrecht-link-column-gap, inherit);
+  display: inline-flex;
+}
+
+@mixin rhc-link--icon {
+  min-block-size: var(--utrecht-link-icon-size, inherit);
+  min-inline-size: var(--utrecht-link-icon-size, inherit);
+}
+
+@mixin rhc-link--visited {
+  --utrecht-link-text-decoration-color: var(--utrecht-link-visited-color, inherit);
+
+  color: var(--utrecht-link-visited-color, inherit);
+}
+
+@mixin rhc-link--visited-icon {
+  color: var(--utrecht-link-visited-color, inherit);
+}
+
+@mixin rhc-link--active {
+  --utrecht-link-text-decoration: var(--utrecht-link-active-text-decoration, inherit);
+}
+
+@mixin rhc-link--focus-visible {
+  z-index: var(--utrecht-stack-focus-z-index, 1);
+}
+
+@mixin rhc-link--focus {
+  --_utrecht-link-state-text-decoration: none;
+}

package/src/link/index.scss

@@ -0,0 +1,44 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+@use "../button/mixin" as button-mixin;
+@use "mixin";
+
+.utrecht-rich-text .utrecht-link {
+  margin-block-end: var(--utrecht-link-margin-block-end);
+}
+
+.utrecht-link:any-link {
+  @include mixin.rhc-link--any-link;
+}
+
+.utrecht-link:any-link .utrecht-icon {
+  @include mixin.rhc-link--icon;
+}
+
+.utrecht-link:visited,
+.utrecht-link--visted {
+  @include mixin.rhc-link--visited;
+}
+
+.utrecht-link:visited .utrecht-icon {
+  @include mixin.rhc-link--visited-icon;
+}
+
+.utrecht-link:active,
+.utrecht-link--active {
+  @include mixin.rhc-link--active;
+}
+
+.utrecht-link:focus-visible,
+.utrecht-link--focus-visible,
+.utrecht-link:focus,
+.utrecht-link--focus {
+  @include mixin.rhc-link--focus-visible;
+  @include mixin.rhc-link--focus;
+}
+
+.utrecht-link .rhc-link__sr-only {
+  @include button-mixin.invisible-but-accessible;
+}

package/src/link-list/index.scss

@@ -0,0 +1,16 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+
+.utrecht-link-list__link {
+  --utrecht-link-icon-inset-block-start: var(--utrecht-link-list-icon-inset-block-start, inherit);
+  --utrecht-link-column-gap: var(--utrecht-link-list-item-column-gap, inherit);
+  --utrecht-link-text-decoration: var(--rhc-link-list-text-decoration);
+
+  align-items: flex-start;
+}
+
+.utrecht-link-list__item {
+  display: inline-flex;
+}

package/src/link-list-card/index.scss

@@ -0,0 +1,10 @@
+.rhc-link-list-card {
+  background-color: var(--rhc-link-list-card-background-color);
+  display: flex;
+  flex-direction: column;
+  gap: var(--rhc-link-list-card-row-gap);
+  padding-block-end: var(--rhc-link-list-card-padding-block-end);
+  padding-block-start: var(--rhc-link-list-card-padding-block-start);
+  padding-inline-end: var(--rhc-link-list-card-padding-inline-end);
+  padding-inline-start: var(--rhc-link-list-card-padding-inline-start);
+}

package/src/logo/_mixin.scss

@@ -0,0 +1,58 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+
+@mixin rhc-logo {
+  display: grid;
+  font-family: var(--rhc-logo-font-family);
+  font-size: var(--rhc-logo-title-font-size, 1em);
+  font-weight: var(--rhc-logo-title-font-weight);
+  gap: 0 var(--rhc-logo-column-gap, inherit);
+  grid-auto-rows: var(--rhc-logo-image-inline-size);
+  grid-template-areas: ". image ." ". image caption";
+  grid-template-columns: 1fr var(--rhc-logo-image-inline-size) 1fr;
+  grid-template-rows: var(--rhc-logo-title-padding-block-start) 1fr;
+  line-height: var(--rhc-logo-title-line-height, 1);
+  margin-block-end: var(--rhc-logo-margin-block-end, 0);
+  margin-block-start: var(--rhc-logo-margin-block-start, 0);
+  margin-inline-end: var(--rhc-logo-margin-inline-end, 0);
+  margin-inline-start: var(--rhc-logo-margin-inline-start, 0);
+  min-block-size: calc(var(--rhc-logo-rows, 2) * var(--rhc-logo-image-inline-size));
+}
+
+@mixin rhc-logo__image {
+  align-items: center;
+  background-color: var(--rhc-logo-image-background-color, inherit);
+  block-size: var(--rhc-logo-image-block-size);
+  color: var(--rhc-logo-image-color, inherit);
+  display: flex;
+  flex-direction: column;
+  grid-area: image;
+  inline-size: var(--rhc-logo-image-inline-size);
+  justify-content: end;
+}
+
+@mixin rhc-logo__icon {
+  block-size: unset;
+  inline-size: unset;
+}
+
+@mixin rhc-logo__caption {
+  color: var(--rhc-logo-color, inherit);
+  grid-area: caption;
+  max-inline-size: var(--rhc-logo-caption-max-inline-size);
+}
+
+@mixin rhc-logo__title {
+  /* reset margin of HTML <h1> element */
+  margin-block-end: 0;
+  margin-block-start: 0;
+  white-space: pre-line;
+}
+
+@mixin rhc-logo__subtitle {
+  font-size: var(--rhc-logo-subtitle-font-size, 1em);
+  font-weight: var(--rhc-logo-subtitle-font-weight);
+  line-height: var(--rhc-logo-subtitle-line-height, 1);
+}

package/src/logo/index.scss

@@ -0,0 +1,31 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+@use "mixin";
+
+.rhc-logo {
+  @include mixin.rhc-logo;
+}
+
+.rhc-logo__image {
+  @include mixin.rhc-logo__image;
+}
+
+.rhc-logo__image .utrecht-icon,
+.rhc-logo__image .rhc-icon {
+  @include mixin.rhc-logo__icon;
+}
+
+.rhc-logo__caption {
+  @include mixin.rhc-logo__caption;
+}
+
+.rhc-logo__title {
+  @include mixin.rhc-logo__title;
+}
+
+.rhc-logo__subtitle {
+  @include mixin.rhc-logo__subtitle;
+  @include mixin.rhc-logo__title;
+}

package/src/message-list/_mixin.scss

@@ -0,0 +1,85 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+
+@mixin rhc-message-list {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin-block: 0;
+  padding-inline: 0;
+  &:last-child {
+    border-block-end-color: var(--rhc-message-list-item-border-color);
+    border-block-end-style: solid;
+    border-block-end-width: var(--rhc-message-list-item-border-width);
+  }
+}
+@mixin rhc-message-list__item {
+  background-color: var(--rhc-message-list-item-background-color);
+  border-block-start-color: var(--rhc-message-list-item-border-color);
+  border-block-start-style: solid;
+  border-block-start-width: var(--rhc-message-list-item-border-width);
+  color: var(--rhc-message-list-item-color);
+  column-gap: var(--rhc-message-list-item-column-gap);
+  display: flex;
+  min-block-size: var(--rhc-message-list-item-min-height);
+  padding-block: var(--rhc-message-list-item-padding-block);
+  padding-inline: var(--rhc-message-list-item-padding-inline);
+  position: relative;
+  text-decoration: none;
+  &:hover {
+    background-color: var(--rhc-message-list-item-hover-background-color, var(--rhc-color-grijs-50));
+  }
+
+  &:focus {
+    background-color: var(--rhc-message-list-item-focus-background-color, var(--rhc-color-lintblauw-50));
+    z-index: 999;
+  }
+
+  &:active {
+    background-color: var(--rhc-message-list-item-active-background-color, var(--rhc-color-grijs-100));
+  }
+}
+
+@mixin rhc-message-list__item-content {
+  align-items: center;
+  display: grid;
+  flex: 1;
+  grid-column-gap: var(--rhc-message-list-item-content-column-gap);
+  grid-row-gap: var(--rhc-message-list-item-content-row-gap);
+  grid-template-areas:
+    "label description meta icon"
+    "label description meta icon"
+    "label description meta icon";
+  grid-template-columns: 1fr 2fr auto auto;
+}
+@mixin rhc-message-list__item__label {
+  --utrecht-paragraph-font-weight: var(--rhc-message-list-item-label-font-weight);
+
+  color: var(--rhc-message-list-item-heading-color);
+  column-gap: var(--rhc-space-100);
+  display: flex;
+  font-family: var(--rhc-message-list-item-label-font-family), sans-serif;
+  font-size: var(--rhc-message-list-item-label-font-size);
+  font-weight: var(--rhc-message-list-item-label-font-weight);
+  grid-area: label;
+  line-height: var(--rhc-message-list-item-label-line-height);
+  margin-block: 0;
+}
+@mixin rhc-message-list__item__description {
+  color: var(--rhc-color-foreground-subdued, inherit);
+  grid-area: description;
+  margin-block: 0;
+}
+@mixin rhc-message-list__item__meta-data {
+  color: var(--rhc-color-foreground-subdued, inherit);
+  grid-area: meta;
+  margin-block: 0;
+}
+@mixin rhc-navigation-list__item__end-icon {
+  --utrecht-icon-color: var(--rhc-color-foreground-lint, inherit);
+
+  grid-area: icon;
+  min-block-size: var(--rhc-message-list-item-icon-font-size);
+}

package/src/message-list/index.scss

@@ -0,0 +1,41 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+
+@use "mixin";
+
+.rhc-message-list {
+  @include mixin.rhc-message-list;
+  &__item {
+    @include mixin.rhc-message-list__item;
+    &-content {
+      @include mixin.rhc-message-list__item-content;
+    }
+    &__label {
+      @include mixin.rhc-message-list__item__label;
+    }
+    &__description {
+      @include mixin.rhc-message-list__item__description;
+    }
+    &__meta-data {
+      @include mixin.rhc-message-list__item__meta-data;
+    }
+    &__end-icon {
+      @include mixin.rhc-navigation-list__item__end-icon;
+    }
+  }
+}
+.rhc-message-list__item-container {
+  container-name: message-list;
+  container-type: inline-size;
+}
+@container message-list (width <= 768px) {
+  .rhc-message-list__item-content {
+    grid-row-gap: var(--rhc-message-list-item-content-row-gap);
+    grid-template-areas:
+      "label label label icon"
+      "description description description icon"
+      "meta meta meta icon";
+  }
+}

package/src/navbar/index.scss

@@ -0,0 +1,90 @@
+.rhc-nav-bar__container {
+  align-items: center;
+  background-color: var(--rhc-nav-bar-background-color);
+  display: flex;
+  inline-size: var(--rhc-nav-bar-container-inline-size);
+  justify-content: center;
+}
+
+.rhc-nav-bar {
+  align-items: center;
+  background-color: var(--rhc-nav-bar-background-color);
+  border-block-end-width: var(--rhc-nav-bar-border-block-end-width);
+  color: var(--rhc-nav-bar-color);
+  column-gap: var(--rhc-nav-bar-content-column-gap);
+  display: flex;
+  flex: 1;
+  font-family: var(--rhc-font-family-primary, inherit);
+  justify-content: space-between;
+  max-inline-size: var(--rhc-nav-bar-max-inline-size);
+  row-gap: var(--rhc-nav-bar-content-row-gap);
+}
+
+.rhc-nav-bar__list {
+  background-color: var(--rhc-nav-bar-background-color);
+  display: flex;
+  list-style: none;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
+}
+
+.rhc-nav-bar__list--end {
+  margin-inline-start: auto;
+}
+
+.rhc-nav-bar__heading {
+  font-weight: var(--rhc-nav-bar-heading-font-weight);
+}
+
+.rhc-nav-bar__link {
+  --utrecht-link-text-decoration: none;
+  --utrecht-link-visited-color: var(--rhc-nav-bar-color);
+
+  color: var(--rhc-nav-bar-color);
+  padding-block-end: var(--rhc-nav-bar-link-padding-block-end);
+  padding-block-start: var(--rhc-nav-bar-link-padding-block-start);
+  padding-inline-end: var(--rhc-nav-bar-link-padding-inline-end);
+  padding-inline-start: var(--rhc-nav-bar-link-padding-inline-start);
+  text-decoration: none;
+
+  &:active {
+    background-color: var(--rhc-nav-bar-link-active-background-color);
+    color: var(--rhc-nav-bar-link-active-color);
+  }
+
+  &:hover {
+    background-color: var(--rhc-nav-bar-link-hover-background-color);
+  }
+
+  &:focus {
+    background-color: var(--rhc-nav-bar-link-focus-background-color);
+    color: var(--rhc-nav-bar-link-focus-color);
+  }
+}
+
+.rhc-sub-nav-bar {
+  --utrecht-column-layout-gap: var(--rhc-sub-nav-bar-column-gap);
+  --utrecht-column-layout-column-width: var(--rhc-sub-nav-bar-column-width);
+
+  background-color: var(--rhc-sub-nav-bar-background-color);
+  inline-size: var(--rhc-sub-nav-bar-inline-size);
+  padding-block-end: calc(var(--rhc-sub-nav-bar-padding-block-end) - var(--rhc-sub-nav-bar-content-list-row-gap));
+  padding-block-start: var(--rhc-sub-nav-bar-padding-block-start);
+  text-align: center;
+}
+
+.rhc-sub-nav-bar__content {
+  margin-inline-end: auto;
+  margin-inline-start: auto;
+  max-inline-size: var(--rhc-sub-nav-bar-content-max-inline-size);
+  padding-inline-end: var(--rhc-sub-nav-bar-content-padding-inline-end);
+  padding-inline-start: var(--rhc-sub-nav-bar-content-padding-inline-start);
+}
+
+.rhc-sub-nav-bar__list {
+  break-inside: avoid;
+  margin-block-end: var(--rhc-sub-nav-bar-content-list-row-gap);
+  text-align: initial;
+}

package/src/navigation-list/_mixin.scss

@@ -0,0 +1,94 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+@mixin rhc-navigation-list {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin-block: 0;
+  padding-inline: 0;
+  &:last-child {
+    border-block-start-color: var(--rhc-navigation-list-item-border-color, var(--rhc-color-grijs-300));
+    border-block-start-style: solid;
+    border-block-start-width: var(--rhc-navigation-list-item-border-width, var(--rhc-border-width-default));
+  }
+}
+@mixin rhc-navigation-list__item {
+  align-items: center;
+  background-color: var(--rhc-navigation-list-item-background-color, var(--rhc-color-canvas));
+  border-block-end-color: var(--rhc-navigation-list-item-border-color, var(--rhc-color-grijs-300));
+  border-block-end-style: solid;
+  border-block-end-width: var(--rhc-navigation-list-item-border-width, var(--rhc-border-width-default));
+  color: var(--rhc-navigation-list-item-color, var(--rhc-color-foreground-subdued));
+  column-gap: var(--rhc-navigation-list-item-column-gap, var(--rhc-space-100));
+  display: flex;
+  min-block-size: var(--rhc-navigation-list-item-min-height, var(--rhc-size-target));
+  padding-block: var(--rhc-navigation-list-item-padding-block, var(--rhc-space-100));
+  padding-inline: var(--rhc-navigation-list-item-padding-inline, var(--rhc-space-200));
+  position: relative;
+  text-decoration: none;
+  &:hover {
+    background-color: var(--rhc-navigation-list-item-hover-background-color, var(--rhc-color-grijs-50));
+  }
+
+  &:focus {
+    background-color: var(--rhc-navigation-list-item-focus-background-color, var(--rhc-color-lintblauw-50));
+    z-index: 999;
+  }
+
+  &:active {
+    background-color: var(--rhc-navigation-list-item-active-background-color, var(--rhc-color-grijs-100));
+  }
+}
+
+@mixin rhc-navigation-list__item__start-icon {
+  --utrecht-icon-color: var(--rhc-navigation-list-icon-color, var(--rhc-color-foreground-subdued));
+
+  background-color: var(--rhc-navigation-list-icon-background-color, var(--rhc-color-wit));
+  block-size: var(--rhc-navigation-list-item-icon-size);
+  border-radius: var(--rhc-navigation-list-icon-border-radius, var(--rhc-border-radius-circle));
+  color: var(--rhc-navigation-list-icon-color, var(--rhc-color-foreground-subdued));
+  grid-area: start-icon;
+  min-inline-size: var(--rhc-navigation-list-item-icon-size);
+  padding-block: var(--rhc-navigation-list-item-icon-padding-block);
+  padding-inline: var(--rhc-navigation-list-item-icon-padding-inline);
+}
+
+@mixin rhc-navigation-list__item-content {
+  align-items: center;
+  display: grid;
+  flex: 1;
+  grid-column-gap: var(--rhc-navigation-list-item-content-column-gap, var(--rhc-space-100));
+  grid-row-gap: var(--rhc-navigation-list-item-content-row-gap, var(--rhc-space-100));
+  grid-template-areas:
+    "label content content end-icon"
+    "label content content end-icon";
+  grid-template-columns: 1fr 1fr 1fr auto;
+}
+
+@mixin rhc-navigation-list__item__label {
+  color: var(--rhc-navigation-list-item-heading-color, var(--rhc-color-foreground-lint));
+  font-family: var(--rhc-navigation-list-item-label-font-family, var(--rhc-font-family-primary)), sans-serif;
+  font-size: var(--rhc-navigation-list-item-label-font-size, var(--rhc-font-size-md-desktop));
+  font-weight: var(--rhc-navigation-list-item-label-font-weight, var(--rhc-font-weight-bold));
+  grid-area: label;
+  line-height: var(--rhc-navigation-list-item-label-line-height, var(--rhc-line-height-md));
+  margin-block: 0;
+}
+@mixin rhc-navigation-list__item__description {
+  color: var(--rhc-color-foreground-subdued);
+  grid-area: content;
+  margin-block: 0;
+  @media (width<= 768px) {
+    text-align: start;
+  }
+}
+
+@mixin rhc-navigation-list__item__end-icon {
+  --utrecht-icon-color: var(--rhc-color-foreground-lint);
+
+  align-self: center;
+  grid-area: end-icon;
+  justify-self: end;
+}

package/src/navigation-list/index.scss

@@ -0,0 +1,43 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+@use "mixin";
+
+.rhc-navigation-list {
+  @include mixin.rhc-navigation-list;
+  &__item {
+    @include mixin.rhc-navigation-list__item;
+    &-content {
+      @include mixin.rhc-navigation-list__item-content;
+    }
+    &__label {
+      @include mixin.rhc-navigation-list__item__label;
+    }
+    &__description {
+      @include mixin.rhc-navigation-list__item__description;
+    }
+    &__start-icon {
+      @include mixin.rhc-navigation-list__item__start-icon;
+    }
+    &__end-icon {
+      @include mixin.rhc-navigation-list__item__end-icon;
+    }
+  }
+}
+.rhc-navigation-list--container-small {
+  container-type: inline-size;
+}
+@container (width <= 768px) {
+  .rhc-navigation-list__item-content {
+    grid-template-areas:
+      "label label label end-icon"
+      "content content content end-icon";
+  }
+  .rhc-navigation-list__item__start-icon {
+    align-self: start;
+  }
+  .rhc-navigation-list__item__description {
+    text-align: start;
+  }
+}

package/src/ordered-list/index.scss

@@ -0,0 +1,18 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+
+.utrecht-ordered-list {
+  color: var(--utrecht-ordered-list-color);
+  font-weight: var(--utrecht-ordered-list-font-weight);
+  line-height: var(--utrecht-ordered-list-line-height);
+  margin-block-end: var(--utrecht-ordered-list-margin-block-end);
+  margin-block-start: var(--utrecht-ordered-list-margin-block-start);
+  margin-inline-start: var(--utrecht-ordered-list-margin-inline-start);
+  padding-inline-start: var(--utrecht-ordered-list-padding-inline-start);
+}
+
+.utrecht-ordered-list__item {
+  padding-inline-start: var(--utrecht-ordered-list-item-padding-inline-start);
+}

package/src/pre-heading/index.scss

@@ -0,0 +1,22 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+
+.rhc-heading-container {
+  display: grid;
+  grid-template-areas:
+    "preheading"
+    "heading";
+}
+
+.rhc-pre-heading {
+  --utrecht-pre-heading-color: var(--utrecht-heading-1-color, inherit);
+  --utrecht-pre-heading-font-weight: var(--rhc-font-weight-regular, inherit);
+
+  grid-area: preheading;
+}
+
+.rhc-heading-container > *:not(.rhc-pre-heading) {
+  grid-area: heading;
+}

package/src/radio/index.scss

@@ -0,0 +1,27 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+
+.utrecht-radio-button {
+  --utrecht-radio-button-icon-size: calc(var(--utrecht-radio-button-dot-size) * 0.5);
+}
+
+.utrecht-radio-button:focus,
+.utrecht-radio-button--focus {
+  --utrecht-radio-button-checked-color: var(--utrecht-radio-button-checked-background-color, inherit);
+}
+
+.utrecht-radio-button:disabled,
+.utrecht-radio-button--disabled {
+  --utrecht-radio-button-checked-color: var(--utrecht-radio-button-disabled-color, inherit);
+}
+
+.utrecht-radio-button:invalid,
+.utrecht-radio-button--invalid {
+  --utrecht-radio-button-background-color: var(--utrecht-radio-button-invalid-background-color, inherit);
+  &:hover,
+  &:focus {
+    background-color: var(--utrecht-radio-button-background-color);
+  }
+}

package/src/radio-group/_mixin.scss

@@ -0,0 +1,12 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+
+@mixin rhc-radio-group {
+  display: flex;
+  flex-direction: column;
+  padding-block-end: var(--rhc-radio-group-padding-block-end, inherit);
+  padding-block-start: var(--rhc-radio-group-padding-block-start, inherit);
+  row-gap: var(--rhc-radio-group-row-gap, inherit);
+}

package/src/radio-group/index.scss

@@ -0,0 +1,10 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+
+@use "mixin";
+
+.rhc-radio-group {
+  @include mixin.rhc-radio-group;
+}

package/src/select/index.scss

@@ -0,0 +1,16 @@
+.utrecht-select {
+  &--html-select:not([multiple]) {
+    // This is an svg of chevron down icon
+    --utrecht-select-background-image: url('data:image/svg+xml,<svg width="8" height="3" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0.292893 0.292893C0.683417 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L7 5.58579L12.2929 0.292893C12.6834 -0.0976311 13.3166 -0.0976311 13.7071 0.292893C14.0976 0.683417 14.0976 1.31658 13.7071 1.70711L7.70711 7.70711C7.31658 8.09763 6.68342 8.09763 6.29289 7.70711L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683417 0.292893 0.292893Z" fill="%23154273"/></svg>');
+    --utrecht-select-image-background-position: right 0.5rem center;
+
+    background-position: var(--utrecht-select-image-background-position);
+    background-size: var(--utrecht-select-icon-size);
+  }
+  &--html-select-rtl:not([multiple]) {
+    --utrecht-select-image-background-position: left 0.5rem center;
+  }
+  &:focus {
+    border-width: var(--utrecht-select-focus-border-width, var(--rhc-border-width-m, 2px));
+  }
+}

package/src/separator/index.scss

@@ -0,0 +1,14 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+
+.utrecht-separator {
+  --utrecht-space-around: 1;
+
+  margin-inline-end: 0;
+  margin-inline-start: 0;
+  &--invisible {
+    --utrecht-separator-color: transparent;
+  }
+}