@utrecht/component-library-css 1.0.0-alpha.592 → 1.0.0-alpha.594

package/dist/html.css

@@ -708,6 +708,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
   margin-inline-end: var(--utrecht-button-margin-inline-end);
   margin-inline-start: var(--utrecht-button-margin-inline-start);
 }
+.utrecht-html button[hidden] {
+  display: none;
+}
 .utrecht-html button[type=submit i],
 .utrecht-html input[type=submit i] {
   cursor: var(--utrecht-action-submit-cursor, revert);
@@ -820,6 +823,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-html fieldset {
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-end, 0));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-start, 0));
+  /* `all: revert` unfortunately has as side-effect that the `hidde` attribute has no effect */
   all: revert;
   border: 0;
   margin-inline-end: 0;
@@ -831,6 +835,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
   padding-inline-start: 0;
   --utrecht-space-around: 1;
 }
+.utrecht-html fieldset[hidden] {
+  display: none;
+}
 .utrecht-html figure {
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-block-end, 0));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-block-start, 0));
@@ -860,6 +867,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-legend-margin-block-end, 0));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-legend-margin-block-start, 0));
 }
+.utrecht-html legend[hidden] {
+  display: none;
+}
 .utrecht-html fieldset:disabled > legend {
   color: var(--utrecht-form-fieldset-legend-disabled-color, var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit)));
 }
@@ -1116,6 +1126,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
   padding-inline-start: var(--utrecht-code-block-padding-inline-start);
   white-space: pre;
 }
+.utrecht-html pre[hidden]:has(> code:only-child) {
+  display: none;
+}
 .utrecht-html pre:has(> code:only-child) > code {
   display: contents;
 }

package/dist/index.css

@@ -2654,6 +2654,125 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   background-color: var(--utrecht-document-background-color, inherit);
 }
 
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
+ */
+.utrecht-drawer {
+  /* minimum size for backdrop with light-dismiss is 44px x 44px to meet WCAG SC 2.5.5 */
+  --_utrecht-drawer-backdrop-min-size: max(var(--utrecht-drawer-backdrop-min-size), 44px);
+  background-color: var(--utrecht-drawer-background-color, Canvas);
+  border-color: var(--utrecht-drawer-border-color, currentColor);
+  border-width: var(--utrecht-drawer-border-width, 0);
+  box-sizing: border-box;
+  color: var(--utrecht-drawer-color, CanvasText);
+  overflow: auto;
+  padding-block-end: var(--utrecht-drawer-padding-block-end);
+  padding-block-start: var(--utrecht-drawer-padding-block-start);
+  padding-inline-end: var(--utrecht-drawer-padding-inline-end);
+  padding-inline-start: var(--utrecht-drawer-padding-inline-start);
+  position: fixed;
+  z-index: var(--utrecht-drawer-z-index, 1);
+}
+
+.utrecht-drawer::backdrop {
+  --_utrecht-backdrop-opacity: var(--utrecht-backdrop-opacity);
+  --_utrecht-backdrop-fade-in-animation-duration: var(--utrecht-backdrop-fade-in-animation-duration, 0);
+  animation-duration: min(var(--utrecht-motion-max-animation-duration, var(--_utrecht-backdrop-fade-in-animation-duration)), var(--_utrecht-backdrop-fade-in-animation-duration, 0));
+  animation-name: utrecht-backdrop-fade-in;
+  animation-timing-function: ease-in-out;
+  background-color: var(--utrecht-backdrop-background-color);
+  color: var(--utrecht-backdrop-color);
+  opacity: var(--_utrecht-backdrop-opacity);
+  -webkit-user-select: none;
+  user-select: none;
+}
+@keyframes utrecht-backdrop-fade-in {
+  from {
+    opacity: 0%;
+  }
+  to {
+    opacity: var(--_utrecht-backdrop-opacity);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .utrecht-drawer::backdrop {
+    --_utrecht-backdrop-fade-in-animation-duration: 0;
+  }
+}
+@media (prefers-reduced-transparency: reduce) {
+  .utrecht-drawer::backdrop {
+    --_utrecht-backdrop-opacity: var(--utrecht-backdrop-reduced-transparency-opacity, 100%);
+  }
+}
+
+.utrecht-drawer--inline-start {
+  block-size: 100%;
+  inset-block-end: 0;
+  inset-block-start: 0;
+  max-block-size: 100%;
+  max-inline-size: min(var(--utrecht-drawer-max-inline-size, 100%), 100% - var(--_utrecht-drawer-backdrop-min-size, 44px));
+  min-inline-size: var(--utrecht-drawer-min-inline-size, calc(320px - var(--_utrecht-drawer-backdrop-min-size)));
+  border-end-end-radius: var(--utrecht-drawer-border-radius);
+  border-inline-start-width: 0;
+  border-start-end-radius: var(--utrecht-drawer-border-radius);
+  inset-inline-end: auto;
+  inset-inline-start: 0;
+}
+
+.utrecht-drawer--inline-end {
+  block-size: 100%;
+  inset-block-end: 0;
+  inset-block-start: 0;
+  max-block-size: 100%;
+  max-inline-size: min(var(--utrecht-drawer-max-inline-size, 100%), 100% - var(--_utrecht-drawer-backdrop-min-size, 44px));
+  min-inline-size: var(--utrecht-drawer-min-inline-size, calc(320px - var(--_utrecht-drawer-backdrop-min-size)));
+  border-end-start-radius: var(--utrecht-drawer-border-radius);
+  border-inline-end-width: 0;
+  border-start-start-radius: var(--utrecht-drawer-border-radius);
+  inset-inline-end: 0;
+  inset-inline-start: auto;
+}
+
+.utrecht-drawer--block-start {
+  block-size: fit-content;
+  inline-size: 100%;
+  inset-inline-end: 0;
+  inset-inline-start: 0;
+  max-block-size: min(var(--utrecht-drawer-max-block-size), 100% - var(--_utrecht-drawer-backdrop-min-size));
+  max-inline-size: 100%;
+  min-block-size: var(--utrecht-drawer-min-block-size, calc(256px - var(--_utrecht-drawer-backdrop-min-size)));
+  border-block-start-width: 0;
+  border-end-end-radius: var(--utrecht-drawer-border-radius);
+  border-end-start-radius: var(--utrecht-drawer-border-radius);
+  inset-block-end: auto;
+  inset-block-start: 0;
+}
+
+.utrecht-drawer--block-end {
+  block-size: fit-content;
+  inline-size: 100%;
+  inset-inline-end: 0;
+  inset-inline-start: 0;
+  max-block-size: min(var(--utrecht-drawer-max-block-size), 100% - var(--_utrecht-drawer-backdrop-min-size));
+  max-inline-size: 100%;
+  min-block-size: var(--utrecht-drawer-min-block-size, calc(256px - var(--_utrecht-drawer-backdrop-min-size)));
+  border-block-end-width: 0;
+  border-start-end-radius: var(--utrecht-drawer-border-radius);
+  border-start-start-radius: var(--utrecht-drawer-border-radius);
+  inset-block-end: 0;
+  inset-block-start: auto;
+}
+
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
@@ -2897,6 +3016,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
 
 .utrecht-form-fieldset--html-fieldset,
 .utrecht-form-fieldset__fieldset--html-fieldset {
+  /* `all: revert` unfortunately has as side-effect that the `hidde` attribute has no effect */
   all: revert;
   border: 0;
   margin-inline-end: 0;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-alpha.592",
+  "version": "1.0.0-alpha.594",
   "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",
@@ -26,5 +26,5 @@
     "clean": "rimraf dist/"
   },
   "main": "dist/index.css",
-  "gitHead": "ff7b84913b022fc7e81d42f8471e5cf8ede7f5ce"
+  "gitHead": "85c10be5cc144c5d7249b8bb40db4c84f1bb1e3a"
 }