@utrecht/component-library-css 3.0.1-alpha.21 → 3.0.1-alpha.23

package/dist/html.css

@@ -1512,7 +1512,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
   inline-size: 100%;
   line-height: var(--utrecht-textarea-line-height, initial);
   max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-control-max-inline-size));
-  min-block-size: var(--utrecht-textarea-min-block-size);
+  min-block-size: var(--utrecht-textarea-min-block-size, var(--utrecht-pointer-target-min-size, 44px));
+  min-inline-size: var(--utrecht-pointer-target-min-size, 44px);
   padding-block-end: var(--utrecht-textarea-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));
   padding-block-start: var(--utrecht-textarea-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));
   padding-inline-end: var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));
@@ -1604,6 +1605,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
   font-weight: initial; /* harden */
   inline-size: 100%;
   line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));
+  min-block-size: var(--utrecht-pointer-target-min-size, 44px);
+  min-inline-size: var(--utrecht-pointer-target-min-size, 44px);
   max-inline-size: var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size));
   padding-block-end: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));
   padding-block-start: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));

package/dist/index.css

@@ -4432,6 +4432,86 @@ however browsers don't seem to have implemented great looking supixel tweening y
   margin-block-start: 0;
 }
 
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+.utrecht-nav-bar {
+  background-color: var(--utrecht-nav-bar-background-color);
+  color: var(--utrecht-nav-bar-color);
+  display: flex;
+  justify-content: center;
+}
+@media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
+  .utrecht-nav-bar {
+    border-block-end-color: currentColor;
+    border-block-end-style: solid;
+    border-block-end-width: 1px;
+    /* add `padding` in `forced-colors` mode to make room for contrasting focus ring */
+    border-block-start-color: currentColor;
+    border-block-start-style: solid;
+    border-block-start-width: 1px;
+    padding-block-end: calc(var(--utrecht-focus-outline-width) * 2);
+    padding-block-start: calc(var(--utrecht-focus-outline-width) * 2);
+  }
+}
+
+.utrecht-nav-bar__content {
+  align-items: stretch;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  inline-size: 100%;
+  justify-content: space-between;
+  /* Wrap content to accomodate:
+    * - 400% zoom
+    * - longer text due to automatic translation
+    * - longer text due to editorial content requirements
+    */
+  max-inline-size: var(--utrecht-nav-bar-content-max-inline-size);
+}
+
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+.utrecht-nav-list {
+  margin-block-end: 0;
+  margin-block-start: 0;
+  margin-inline-end: 0;
+  margin-inline-start: 0;
+  padding-inline-start: 0;
+  align-items: stretch;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  inline-size: 100%;
+  justify-content: start;
+}
+
+.utrecht-nav-list--center > * {
+  flex: 1 1 0;
+  justify-content: center;
+}
+
+.utrecht-nav-list__item {
+  list-style: none;
+  display: inline-flex;
+}
+
+/* Style for the navigation links */
+.utrecht-nav-list__link {
+  font-weight: var(--utrecht-nav-list-link-font-weight);
+  max-inline-size: var(--utrecht-nav-bar-link-max-inline-size, 30ch);
+  padding-block-end: var(--utrecht-nav-bar-link-padding-block-end);
+  padding-block-start: var(--utrecht-nav-bar-link-padding-block-start);
+  padding-inline-end: var(--utrecht-nav-bar-link-padding-inline-end);
+  padding-inline-start: var(--utrecht-nav-bar-link-padding-inline-start);
+  text-decoration: none;
+}
+
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 The Knights Who Say NIH! B.V.
@@ -6223,7 +6303,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
   inline-size: 100%;
   line-height: var(--utrecht-textarea-line-height, initial);
   max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-control-max-inline-size));
-  min-block-size: var(--utrecht-textarea-min-block-size);
+  min-block-size: var(--utrecht-textarea-min-block-size, var(--utrecht-pointer-target-min-size, 44px));
+  min-inline-size: var(--utrecht-pointer-target-min-size, 44px);
   padding-block-end: var(--utrecht-textarea-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));
   padding-block-start: var(--utrecht-textarea-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));
   padding-inline-end: var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));
@@ -6384,6 +6465,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
   font-weight: initial; /* harden */
   inline-size: 100%;
   line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));
+  min-block-size: var(--utrecht-pointer-target-min-size, 44px);
+  min-inline-size: var(--utrecht-pointer-target-min-size, 44px);
   max-inline-size: var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size));
   padding-block-end: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));
   padding-block-start: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.0.1-alpha.21",
+  "version": "3.0.1-alpha.23",
   "author": "Community for NL Design System",
   "description": "Component library bundle for the Municipality of Utrecht based on the NL Design System architecture",
   "license": "EUPL-1.2",