@utrecht/component-library-css 1.0.0-alpha.512 → 1.0.0-alpha.514

package/dist/index.css

@@ -2661,8 +2661,19 @@ ol.utrecht-breadcrumb__list {
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
 .utrecht-form-toggle {
   align-items: center;
+  block-size: var(--utrecht-form-toggle-height, 2em);
   border-color: var(--utrecht-form-toggle-border-color, currentColor);
   border-radius: var(--utrecht-form-toggle-border-radius, 999rem);
   border-style: var(--utrecht-form-toggle-border-style, solid);
@@ -2670,7 +2681,7 @@ ol.utrecht-breadcrumb__list {
   color: var(--utrecht-form-toggle-color);
   cursor: var(--utrecht-action-activate-cursor);
   display: flex;
-  height: var(--utrecht-form-toggle-height, 2em);
+  inline-size: var(--utrecht-form-toggle-width, 6em);
   padding-block-end: var(--utrecht-form-toggle-padding-block-end);
   padding-block-start: var(--utrecht-form-toggle-padding-block-start);
   padding-inline-end: var(--utrecht-form-toggle-padding-inline-end);
@@ -2678,13 +2689,34 @@ ol.utrecht-breadcrumb__list {
   position: relative;
   -webkit-user-select: none;
   user-select: none;
-  width: var(--utrecht-form-toggle-width, 6em);
+}
+@media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
+  .utrecht-form-toggle {
+    --utrecht-form-toggle-background-color: ButtonFace;
+    --utrecht-form-toggle-border-color: buttonborder;
+    --utrecht-form-toggle-border-width: 1px;
+    --utrecht-form-toggle-border-radius: var(--utrecht-form-toggle-track-border-radius);
+    --utrecht-form-toggle-thumb-background-color: ButtonText;
+    --utrecht-form-toggle-thumb-disabled-background-color: GrayText;
+    /* TODO: Apply `GrayText` to the border-color */
+    border-color: var(--utrecht-form-toggle-track-disabled-border-color, var(--utrecht-form-toggle-track-border-color));
+    border-width: min(var(--utrecht-form-toggle-border-width, 1px), 1px);
+    /* TODO: Find a way to express the `pressed` state */
+  }
 }
 
-.utrecht-form-toggle--focus {
-  border-color: var(--utrecht-form-toggle-focus-border-color, var(--utrecht-form-toggle-border-color, currentColor));
-  border-style: var(--utrecht-form-toggle-focus-border-style, var(--utrecht-form-toggle-border-style, solid));
-  border-width: var(--utrecht-form-toggle-focus-border-width, var(--utrecht-form-toggle-border-width, 1px));
+.utrecht-form-toggle--focus-visible, .utrecht-form-toggle--html-div:focus-visible {
+  /* - The browser default focus ring should apply when these CSS custom properties are not set.
+   * - Make the `box-shadow` value available, so components that have their own `box-shadow`
+   *   can combine it with the focus ring box shadow.
+   */
+  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
+    var(--utrecht-focus-inverse-outline-color, transparent);
+  box-shadow: var(--_utrecht-focus-ring-box-shadow);
+  outline-color: var(--utrecht-focus-outline-color, revert);
+  outline-offset: var(--utrecht-focus-outline-offset, revert);
+  outline-style: var(--utrecht-focus-outline-style, revert);
+  outline-width: var(--utrecht-focus-outline-width, revert);
 }
 
 .utrecht-form-toggle--hover {
@@ -2692,7 +2724,7 @@ ol.utrecht-breadcrumb__list {
   color: var(--utrecht-form-toggle-hover-color, var(--utrecht-form-toggle-color));
 }
 
-.utrecht-form-toggle--disabled {
+.utrecht-form-toggle--disabled, .utrecht-form-toggle--html-div:disabled {
   border-color: var(--utrecht-form-toggle-disabled-border-color, var(--utrecht-form-toggle-border-color, currentColor));
   border-style: var(--utrecht-form-toggle-disabled-border-style, var(--utrecht-form-toggle-border-style, solid));
   border-width: var(--utrecht-form-toggle-disabled-border-width, var(--utrecht-form-toggle-border-width, 1px));
@@ -2727,10 +2759,10 @@ ol.utrecht-breadcrumb__list {
 .utrecht-form-toggle__track {
   align-items: center;
   background-color: var(--utrecht-form-toggle-accent-color);
+  block-size: 100%;
   border-radius: var(--utrecht-form-toggle-track-border-radius, var(--utrecht-form-toggle-border-radius));
   display: flex;
-  height: 100%;
-  width: 100%;
+  inline-size: 100%;
 }
 
 .utrecht-form-toggle__track--checked, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked ~ .utrecht-form-toggle__track {
@@ -2744,11 +2776,12 @@ ol.utrecht-breadcrumb__list {
 
 .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox {
   /* Source: https://kittygiraudel.com/snippets/sr-only-class/ */
+  block-size: 1px !important;
   border: 0 !important;
   clip: rect(1px, 1px, 1px, 1px) !important;
   -webkit-clip-path: inset(50%) !important;
   clip-path: inset(50%) !important;
-  height: 1px !important;
+  inline-size: 1px !important;
   /* stylelint-disable-next-line property-disallowed-list */
   margin: -1px !important;
   overflow: hidden !important;
@@ -2756,12 +2789,6 @@ ol.utrecht-breadcrumb__list {
   padding: 0 !important;
   position: absolute !important;
   white-space: nowrap !important;
-  width: 1px !important;
-}
-.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:focus ~ .utrecht-form-toggle__track {
-  outline-color: var(--utrecht-form-toggle-focus-border-color, var(--utrecht-form-toggle-border-color, currentColor));
-  outline-style: var(--utrecht-form-toggle-focus-border-style, var(--utrecht-form-toggle-border-style, solid));
-  outline-width: var(--utrecht-form-toggle-focus-border-width, var(--utrecht-form-toggle-border-width, 1px));
 }
 /**
  * @license EUPL-1.2
@@ -5483,6 +5510,24 @@ however browsers don't seem to have implemented great looking supixel tweening y
   font-variant-numeric: slashed-zero;
 }
 
+/**
+ * This class name is experimental.
+ */
+.utrecht-textbox--placeholder-ltr::placeholder, .utrecht-textbox--placeholder-ltr:placeholder-shown {
+  /* For <input dir="rtr" placeholder="+31 555 1234">,
+   * behave as `dir="auto"` when the placeholder is shown. */
+  direction: ltr;
+}
+
+/**
+ * This class name is experimental.
+ */
+.utrecht-textbox--placeholder-rtl::placeholder, .utrecht-textbox--placeholder-rtl:placeholder-shown {
+  /* For <input dir="rtr" placeholder="+31 555 1234">,
+   * behave as `dir="auto"` when the placeholder is shown. */
+  direction: rtl;
+}
+
 .utrecht-textbox--url {
   font-variant-ligatures: none;
 }

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-alpha.512",
+  "version": "1.0.0-alpha.514",
   "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": "a47f0c83f0f8a5f94d82d7332c8ce982eb499941"
+  "gitHead": "94a84d1619a8303adc5933bebf5fe05b8ae2dae7"
 }