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

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

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-alpha.593",
+  "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": "9a4b71bb0249a70412ffd23b78a8234a9e6d66a7"
+  "gitHead": "85c10be5cc144c5d7249b8bb40db4c84f1bb1e3a"
 }