@utrecht/component-library-css 1.0.0-alpha.569 → 1.0.0-alpha.570

package/dist/html.css

@@ -1009,6 +1009,10 @@ however browsers don't seem to have implemented great looking supixel tweening y
   background-color: var(--utrecht-link-focus-background-color, transparent);
   text-decoration-skip: none;
   text-decoration-skip-ink: none;
+  /*
+   * WCAG SC 2.4.12: Focus Not Obscured
+   * Use `z-index` to ensure the focus ring is stacked above adjecent elements with a `background`
+   */
   /* - 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.
@@ -1020,6 +1024,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   outline-offset: var(--utrecht-focus-outline-offset, revert);
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
+  z-index: var(--utrecht-stack-focus-z-index, 1);
 }
 .utrecht-html a:focus:not(:focus-visible) {
   /* undo focus ring */

package/dist/index.css

@@ -663,6 +663,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   --utrecht-link-visited-color: var(--utrecht-breadcrumb-link-color);
   --utrecht-link-visited-text-decoration: var(--utrecht-link-text-decoration);
   --utrecht-link-color: var(--utrecht-breadcrumb-link-color);
+  --utrecht-link-placeholder-color: var(--utrecht-link-breadcrumb-link-disabled-color);
   font-family: var(--utrecht-document-font-family, inherit);
   font-size: var(--utrecht-breadcrumb-font-size);
   text-transform: var(--utrecht-document-text-transform, inherit);
@@ -673,24 +674,32 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
 }
 
 .utrecht-breadcrumb__list {
-  block-size: var(--utrecht-breadcrumb-block-size);
   display: flex;
+  flex-wrap: wrap;
+  min-block-size: var(--utrecht-breadcrumb-min-block-size);
 }
 
-ol.utrecht-breadcrumb__list {
+.utrecht-breadcrumb__list--html-ol {
   list-style: none;
   margin-block-end: 0;
   margin-block-start: 0;
   padding-inline-start: 0;
 }
 
+.utrecht-breadcrumb__list--html-p {
+  margin-block-end: 0;
+  margin-block-start: 0;
+}
+
 .utrecht-breadcrumb__item {
   block-size: 100%;
 }
 
 .utrecht-breadcrumb__link {
+  --utrecht-icon-size: var(--utrecht-breadcrumb-link-icon-size);
+  --utrecht-link-icon-size: var(--utrecht-breadcrumb-link-icon-size);
   background-color: var(--utrecht-breadcrumb-link-background-color);
-  display: block;
+  display: inline-block;
   padding-block-end: var(--utrecht-breadcrumb-item-padding-block-end, 8px);
   padding-block-start: var(--utrecht-breadcrumb-item-padding-block-start, 8px);
   padding-inline-end: var(--utrecht-breadcrumb-item-padding-inline-end, 8px);
@@ -701,6 +710,12 @@ ol.utrecht-breadcrumb__list {
   --utrecht-link-placeholder-color: var(--utrecht-breadcrumb-link-disabled-color, var(--utrecht-breadcrumb-link-color));
   background-color: var(--utrecht-breadcrumb-link-disabled-background-color, var(--utrecht-breadcrumb-link-background-color));
   color: var(--utrecht-link-placeholder-color);
+  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
+}
+
+.utrecht-breadcrumb__link--current:any-link {
+  /* `current` should override `disabled` */
+  cursor: var(--utrecht-action-inert-cursor, default);
 }
 
 /* stylelint-disable-next-line block-no-empty */
@@ -709,28 +724,43 @@ ol.utrecht-breadcrumb__list {
    * Overwrite `style` attribute using "private" CSS variable for <li> hack:
    * <li aria-hidden="true" hidden style="display: var(--_utrecht-breadcrumb-separator-display, block)">
    */
-  --_utrecht-breadcrumb-separator-display: flex;
+  --_utrecht-breadcrumb-separator-display: inline-flex;
+  --utrecht-icon-size: var(--utrecht-breadcrumb-separator-icon-size);
+  --utrecht-icon-color: var(--utrecht-breadcrumb-separator-icon-color);
+  align-items: center;
+  display: var(--_utrecht-breadcrumb-separator-display);
+  inline-size: fit-content;
+}
+
+.utrecht-breadcrumb__separator--html-li {
+  /*
+   * Overwrite `style` attribute using "private" CSS variable for <li> hack:
+   * <li aria-hidden="true" hidden style="display: var(--_utrecht-breadcrumb-separator-display, block)">
+   */
+  --_utrecht-breadcrumb-separator-display: inline-flex;
   --utrecht-icon-size: var(--utrecht-breadcrumb-separator-icon-size);
   --utrecht-icon-color: var(--utrecht-breadcrumb-separator-icon-color);
   align-items: center;
   display: var(--_utrecht-breadcrumb-separator-display);
-  inline-size: var(--utrecht-breadcrumb-separator-inline-size);
+  inline-size: fit-content;
 }
 
 .utrecht-breadcrumb--arrows {
   /* https://css-tricks.com/triangle-breadcrumbs/ */
   --utrecht-breadcrumb-arrow-size: 24px;
+  min-block-size: var(--utrecht-breadcrumb-min-block-size);
   overflow: hidden;
 }
 .utrecht-breadcrumb--arrows .utrecht-breadcrumb__link {
+  background-color: var(--utrecht-breadcrumb-arrows-link-background-color);
   padding-inline-end: 0;
   position: relative;
 }
 .utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::after,
 .utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::before {
   block-size: 0;
-  border-block-end-width: var(--utrecht-breadcrumb-block-size);
-  border-block-start-width: var(--utrecht-breadcrumb-block-size);
+  border-block-end-width: var(--utrecht-breadcrumb-min-block-size);
+  border-block-start-width: var(--utrecht-breadcrumb-min-block-size);
   border-color: transparent;
   border-style: solid;
   content: " ";
@@ -738,29 +768,31 @@ ol.utrecht-breadcrumb__list {
   inline-size: 0;
   inset-block-start: 50%;
   inset-inline-start: 100%;
-  margin-block-start: calc(-1 * var(--utrecht-breadcrumb-block-size));
+  margin-block-start: calc(-1 * var(--utrecht-breadcrumb-min-block-size));
   position: absolute;
 }
 .utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::after {
-  border-inline-start-color: var(--utrecht-breadcrumb-link-background-color);
+  border-inline-start-color: var(--utrecht-breadcrumb-arrows-link-background-color);
   border-inline-start-width: var(--utrecht-breadcrumb-arrow-size);
   z-index: 2;
 }
 .utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::before {
   border-inline-start-color: var(--utrecht-document-background-color);
   border-inline-start-width: var(--utrecht-breadcrumb-arrow-size);
-  margin-block-start: calc(-1 * var(--utrecht-breadcrumb-block-size));
+  margin-block-start: calc(-1 * var(--utrecht-breadcrumb-min-block-size));
   margin-inline-start: 1px;
   z-index: 1;
 }
 .utrecht-breadcrumb--arrows .utrecht-breadcrumb__link--focus,
 .utrecht-breadcrumb--arrows .utrecht-breadcrumb__link:focus {
-  background-color: var(--utrecht-breadcrumb-link-focus-background-color);
+  --utrecht-link-focus-background-color: var(--utrecht-breadcrumb-arrows-link-focus-background-color);
+  background-color: var(--utrecht-breadcrumb-arrows-link-focus-background-color);
 }
 .utrecht-breadcrumb--arrows .utrecht-breadcrumb__link--focus::after,
 .utrecht-breadcrumb--arrows .utrecht-breadcrumb__link:focus::after {
-  border-inline-start-color: var(--utrecht-breadcrumb-link-focus-background-color);
+  border-inline-start-color: var(--utrecht-breadcrumb-arrows-link-focus-background-color);
 }
+.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link ~ .utrecht-breadcrumb__link,
 .utrecht-breadcrumb--arrows .utrecht-breadcrumb__item ~ .utrecht-breadcrumb__item .utrecht-breadcrumb__link {
   padding-inline-start: calc(var(--utrecht-breadcrumb-item-padding-inline-start) + var(--utrecht-breadcrumb-arrow-size));
 }
@@ -3521,6 +3553,10 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 
 .utrecht-link-button--focus-visible, .utrecht-link-button--html-button:focus-visible {
+  /*
+   * WCAG SC 2.4.12: Focus Not Obscured
+   * Use `z-index` to ensure the focus ring is stacked above adjecent elements with a `background`
+   */
   /* - 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.
@@ -3532,6 +3568,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   outline-offset: var(--utrecht-focus-outline-offset, revert);
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
+  z-index: var(--utrecht-stack-focus-z-index, 1);
 }
 
 .utrecht-link-button--active, .utrecht-link-button--html-button:not(:disabled):active {
@@ -3785,6 +3822,10 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 
 .utrecht-link--focus-visible {
+  /*
+   * WCAG SC 2.4.12: Focus Not Obscured
+   * Use `z-index` to ensure the focus ring is stacked above adjecent elements with a `background`
+   */
   /* - 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.
@@ -3796,6 +3837,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   outline-offset: var(--utrecht-focus-outline-offset, revert);
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
+  z-index: var(--utrecht-stack-focus-z-index, 1);
 }
 
 /* `:focus` should only apply to links with `href`, not on disabled links */
@@ -3807,6 +3849,10 @@ however browsers don't seem to have implemented great looking supixel tweening y
   background-color: var(--utrecht-link-focus-background-color, transparent);
   text-decoration-skip: none;
   text-decoration-skip-ink: none;
+  /*
+   * WCAG SC 2.4.12: Focus Not Obscured
+   * Use `z-index` to ensure the focus ring is stacked above adjecent elements with a `background`
+   */
   /* - 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.
@@ -3818,6 +3864,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   outline-offset: var(--utrecht-focus-outline-offset, revert);
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
+  z-index: var(--utrecht-stack-focus-z-index, 1);
 }
 
 .utrecht-link--html-span:focus:not(:focus-visible),

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-alpha.569",
+  "version": "1.0.0-alpha.570",
   "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": "7c03dd014bd1c699a48fb3f0425c60dcf501b974"
+  "gitHead": "846acda8d46c731adefec5b01e696c2d89bdc55a"
 }