@utrecht/component-library-css 1.0.0-alpha.584 → 1.0.0-alpha.585

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/index.css +69 -66
  2. package/package.json +2 -2
package/dist/index.css CHANGED
@@ -684,67 +684,70 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
684
684
  * Copyright (c) 2021 Robbert Broersma
685
685
  */
686
686
  /* stylelint-disable-next-line block-no-empty */
687
- .utrecht-breadcrumb {
688
- --utrecht-focus-background-color: var(--utrecht-breadcrumb-link-focus-background-color);
689
- --utrecht-link-background-color: var(--utrecht-breadcrumb-link-background-color);
690
- --utrecht-link-focus-color: var(--utrecht-breadcrumb-link-focus-color, var(--utrecht-breadcrumb-link-color));
687
+ .utrecht-breadcrumb-nav {
688
+ --utrecht-focus-background-color: var(--utrecht-breadcrumb-nav-link-focus-background-color);
689
+ --utrecht-link-background-color: var(--utrecht-breadcrumb-nav-link-background-color);
690
+ --utrecht-link-focus-color: var(--utrecht-breadcrumb-nav-link-focus-color, var(--utrecht-breadcrumb-nav-link-color));
691
691
  --utrecht-link-focus-text-decoration: var(--utrecht-link-text-decoration);
692
- --utrecht-link-hover-color: var(--utrecht-breadcrumb-link-color);
692
+ --utrecht-link-hover-color: var(--utrecht-breadcrumb-nav-link-color);
693
693
  --utrecht-link-hover-text-decoration: var(--utrecht-link-text-decoration);
694
- --utrecht-link-visited-color: var(--utrecht-breadcrumb-link-color);
694
+ --utrecht-link-visited-color: var(--utrecht-breadcrumb-nav-link-color);
695
695
  --utrecht-link-visited-text-decoration: var(--utrecht-link-text-decoration);
696
- --utrecht-link-color: var(--utrecht-breadcrumb-link-color);
696
+ --utrecht-link-color: var(--utrecht-breadcrumb-nav-link-color);
697
697
  --utrecht-link-placeholder-color: var(--utrecht-link-breadcrumb-link-disabled-color);
698
698
  font-family: var(--utrecht-document-font-family, inherit);
699
- font-size: var(--utrecht-breadcrumb-font-size);
699
+ font-size: var(--utrecht-breadcrumb-nav-font-size);
700
700
  text-transform: var(--utrecht-document-text-transform, inherit);
701
701
  }
702
702
 
703
- .utrecht-breadcrumb__heading {
703
+ .utrecht-breadcrumb-nav__heading {
704
704
  display: none;
705
705
  }
706
706
 
707
- .utrecht-breadcrumb__list {
707
+ .utrecht-breadcrumb-nav__list {
708
708
  display: flex;
709
709
  flex-wrap: wrap;
710
- min-block-size: var(--utrecht-breadcrumb-min-block-size);
710
+ min-block-size: var(--utrecht-breadcrumb-nav-min-block-size);
711
711
  }
712
712
 
713
- .utrecht-breadcrumb__list--html-ol {
713
+ .utrecht-breadcrumb-nav__list--html-ol {
714
714
  list-style: none;
715
715
  margin-block-end: 0;
716
716
  margin-block-start: 0;
717
717
  padding-inline-start: 0;
718
718
  }
719
719
 
720
- .utrecht-breadcrumb__list--html-p {
720
+ .utrecht-breadcrumb-nav__list--html-p {
721
721
  margin-block-end: 0;
722
722
  margin-block-start: 0;
723
723
  }
724
724
 
725
- .utrecht-breadcrumb__item {
725
+ .utrecht-breadcrumb-nav__item {
726
726
  block-size: 100%;
727
727
  }
728
728
 
729
- .utrecht-breadcrumb__link {
730
- --utrecht-icon-size: var(--utrecht-breadcrumb-link-icon-size);
731
- --utrecht-link-icon-size: var(--utrecht-breadcrumb-link-icon-size);
732
- background-color: var(--utrecht-breadcrumb-link-background-color);
729
+ .utrecht-breadcrumb-nav__link {
730
+ --utrecht-icon-size: var(--utrecht-breadcrumb-nav-link-icon-size);
731
+ --utrecht-link-icon-size: var(--utrecht-breadcrumb-nav-link-icon-size);
732
+ background-color: var(--utrecht-breadcrumb-nav-link-background-color);
733
733
  display: inline-block;
734
- padding-block-end: var(--utrecht-breadcrumb-item-padding-block-end, 8px);
735
- padding-block-start: var(--utrecht-breadcrumb-item-padding-block-start, 8px);
736
- padding-inline-end: var(--utrecht-breadcrumb-item-padding-inline-end, 8px);
737
- padding-inline-start: var(--utrecht-breadcrumb-item-padding-inline-start, 8px);
734
+ padding-block-end: var(--utrecht-breadcrumb-nav-item-padding-block-end, 8px);
735
+ padding-block-start: var(--utrecht-breadcrumb-nav-item-padding-block-start, 8px);
736
+ padding-inline-end: var(--utrecht-breadcrumb-nav-item-padding-inline-end, 8px);
737
+ padding-inline-start: var(--utrecht-breadcrumb-nav-item-padding-inline-start, 8px);
738
738
  }
739
739
 
740
- .utrecht-breadcrumb__link--disabled {
741
- --utrecht-link-placeholder-color: var(--utrecht-breadcrumb-link-disabled-color, var(--utrecht-breadcrumb-link-color));
742
- background-color: var(--utrecht-breadcrumb-link-disabled-background-color, var(--utrecht-breadcrumb-link-background-color));
740
+ .utrecht-breadcrumb-nav__link--disabled {
741
+ --utrecht-link-placeholder-color: var(
742
+ --utrecht-breadcrumb-nav-link-disabled-color,
743
+ var(--utrecht-breadcrumb-nav-link-color)
744
+ );
745
+ background-color: var(--utrecht-breadcrumb-nav-link-disabled-background-color, var(--utrecht-breadcrumb-nav-link-background-color));
743
746
  color: var(--utrecht-link-placeholder-color);
744
747
  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
745
748
  }
746
749
 
747
- .utrecht-breadcrumb__link--current {
750
+ .utrecht-breadcrumb-nav__link--current {
748
751
  /*
749
752
  * `current` should apply to `disabled` links too, and it should override `disabled`.
750
753
  * The override is the reason why this selector is not ordered alphabetically.
@@ -755,54 +758,54 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
755
758
  }
756
759
 
757
760
  /* stylelint-disable-next-line block-no-empty */
758
- .utrecht-breadcrumb__separator {
761
+ .utrecht-breadcrumb-nav__separator {
759
762
  /*
760
763
  * Overwrite `style` attribute using "private" CSS variable for <li> hack:
761
- * <li aria-hidden="true" hidden style="display: var(--_utrecht-breadcrumb-separator-display, block)">
764
+ * <li aria-hidden="true" hidden style="display: var(--_utrecht-breadcrumb-nav-separator-display, block)">
762
765
  */
763
- --_utrecht-breadcrumb-separator-display: inline-flex;
764
- --utrecht-icon-size: var(--utrecht-breadcrumb-separator-icon-size);
766
+ --_utrecht-breadcrumb-nav-separator-display: inline-flex;
767
+ --utrecht-icon-size: var(--utrecht-breadcrumb-nav-separator-icon-size);
765
768
  align-items: center;
766
- color: var(--utrecht-breadcrumb-separator-color);
769
+ color: var(--utrecht-breadcrumb-nav-separator-color);
767
770
  cursor: var(--utrecht-action-inert-cursor, default);
768
- display: var(--_utrecht-breadcrumb-separator-display);
771
+ display: var(--_utrecht-breadcrumb-nav-separator-display);
769
772
  inline-size: fit-content;
770
773
  -webkit-user-select: none;
771
774
  user-select: none;
772
775
  }
773
776
 
774
- .utrecht-breadcrumb__separator--html-li {
777
+ .utrecht-breadcrumb-nav__separator--html-li {
775
778
  /*
776
779
  * Overwrite `style` attribute using "private" CSS variable for <li> hack:
777
- * <li aria-hidden="true" hidden style="display: var(--_utrecht-breadcrumb-separator-display, block)">
780
+ * <li aria-hidden="true" hidden style="display: var(--_utrecht-breadcrumb-nav-separator-display, block)">
778
781
  */
779
- --_utrecht-breadcrumb-separator-display: inline-flex;
780
- --utrecht-icon-size: var(--utrecht-breadcrumb-separator-icon-size);
782
+ --_utrecht-breadcrumb-nav-separator-display: inline-flex;
783
+ --utrecht-icon-size: var(--utrecht-breadcrumb-nav-separator-icon-size);
781
784
  align-items: center;
782
- color: var(--utrecht-breadcrumb-separator-color);
785
+ color: var(--utrecht-breadcrumb-nav-separator-color);
783
786
  cursor: var(--utrecht-action-inert-cursor, default);
784
- display: var(--_utrecht-breadcrumb-separator-display);
787
+ display: var(--_utrecht-breadcrumb-nav-separator-display);
785
788
  inline-size: fit-content;
786
789
  -webkit-user-select: none;
787
790
  user-select: none;
788
791
  }
789
792
 
790
- .utrecht-breadcrumb--arrows {
793
+ .utrecht-breadcrumb-nav--arrows {
791
794
  /* https://css-tricks.com/triangle-breadcrumbs/ */
792
- --utrecht-breadcrumb-arrow-size: 24px;
793
- min-block-size: var(--utrecht-breadcrumb-min-block-size);
795
+ --utrecht-breadcrumb-nav-arrow-size: 24px;
796
+ min-block-size: var(--utrecht-breadcrumb-nav-min-block-size);
794
797
  overflow: hidden;
795
798
  }
796
- .utrecht-breadcrumb--arrows .utrecht-breadcrumb__link {
797
- background-color: var(--utrecht-breadcrumb-arrows-link-background-color);
799
+ .utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link {
800
+ background-color: var(--utrecht-breadcrumb-nav-arrows-link-background-color);
798
801
  padding-inline-end: 0;
799
802
  position: relative;
800
803
  }
801
- .utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::after,
802
- .utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::before {
804
+ .utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link::after,
805
+ .utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link::before {
803
806
  block-size: 0;
804
- border-block-end-width: var(--utrecht-breadcrumb-min-block-size);
805
- border-block-start-width: var(--utrecht-breadcrumb-min-block-size);
807
+ border-block-end-width: var(--utrecht-breadcrumb-nav-min-block-size);
808
+ border-block-start-width: var(--utrecht-breadcrumb-nav-min-block-size);
806
809
  border-color: transparent;
807
810
  border-style: solid;
808
811
  content: " ";
@@ -810,37 +813,37 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
810
813
  inline-size: 0;
811
814
  inset-block-start: 50%;
812
815
  inset-inline-start: 100%;
813
- margin-block-start: calc(-1 * var(--utrecht-breadcrumb-min-block-size));
816
+ margin-block-start: calc(-1 * var(--utrecht-breadcrumb-nav-min-block-size));
814
817
  position: absolute;
815
818
  }
816
- .utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::after {
817
- border-inline-start-color: var(--utrecht-breadcrumb-arrows-link-background-color);
818
- border-inline-start-width: var(--utrecht-breadcrumb-arrow-size);
819
+ .utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link::after {
820
+ border-inline-start-color: var(--utrecht-breadcrumb-nav-arrows-link-background-color);
821
+ border-inline-start-width: var(--utrecht-breadcrumb-nav-arrow-size);
819
822
  z-index: 2;
820
823
  }
821
- .utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::before {
824
+ .utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link::before {
822
825
  border-inline-start-color: var(--utrecht-document-background-color);
823
- border-inline-start-width: var(--utrecht-breadcrumb-arrow-size);
824
- margin-block-start: calc(-1 * var(--utrecht-breadcrumb-min-block-size));
826
+ border-inline-start-width: var(--utrecht-breadcrumb-nav-arrow-size);
827
+ margin-block-start: calc(-1 * var(--utrecht-breadcrumb-nav-min-block-size));
825
828
  margin-inline-start: 1px;
826
829
  z-index: 1;
827
830
  }
828
- .utrecht-breadcrumb--arrows .utrecht-breadcrumb__link--focus,
829
- .utrecht-breadcrumb--arrows .utrecht-breadcrumb__link:focus {
830
- --utrecht-link-focus-background-color: var(--utrecht-breadcrumb-arrows-link-focus-background-color);
831
- background-color: var(--utrecht-breadcrumb-arrows-link-focus-background-color);
831
+ .utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link--focus,
832
+ .utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link:focus {
833
+ --utrecht-link-focus-background-color: var(--utrecht-breadcrumb-nav-arrows-link-focus-background-color);
834
+ background-color: var(--utrecht-breadcrumb-nav-arrows-link-focus-background-color);
832
835
  }
833
- .utrecht-breadcrumb--arrows .utrecht-breadcrumb__link--focus::after,
834
- .utrecht-breadcrumb--arrows .utrecht-breadcrumb__link:focus::after {
835
- border-inline-start-color: var(--utrecht-breadcrumb-arrows-link-focus-background-color);
836
+ .utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link--focus::after,
837
+ .utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link:focus::after {
838
+ border-inline-start-color: var(--utrecht-breadcrumb-nav-arrows-link-focus-background-color);
836
839
  }
837
- .utrecht-breadcrumb--arrows .utrecht-breadcrumb__link ~ .utrecht-breadcrumb__link,
838
- .utrecht-breadcrumb--arrows .utrecht-breadcrumb__item ~ .utrecht-breadcrumb__item .utrecht-breadcrumb__link {
839
- padding-inline-start: calc(var(--utrecht-breadcrumb-item-padding-inline-start) + var(--utrecht-breadcrumb-arrow-size));
840
+ .utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link ~ .utrecht-breadcrumb-nav__link,
841
+ .utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__item ~ .utrecht-breadcrumb-nav__item .utrecht-breadcrumb-nav__link {
842
+ padding-inline-start: calc(var(--utrecht-breadcrumb-nav-item-padding-inline-start) + var(--utrecht-breadcrumb-nav-arrow-size));
840
843
  }
841
844
 
842
- .utrecht-breadcrumb__item ~ .utrecht-breadcrumb__item {
843
- margin-inline-start: var(--utrecht-breadcrumb-item-divider-inline-size);
845
+ .utrecht-breadcrumb-nav__item ~ .utrecht-breadcrumb-nav__item {
846
+ margin-inline-start: var(--utrecht-breadcrumb-nav-item-divider-inline-size);
844
847
  }
845
848
 
846
849
  /**
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.0.0-alpha.584",
2
+ "version": "1.0.0-alpha.585",
3
3
  "author": "Community for NL Design System",
4
4
  "description": "Component library bundle for the Municipality of Utrecht based on the NL Design System architecture",
5
5
  "license": "EUPL-1.2",
@@ -26,5 +26,5 @@
26
26
  "clean": "rimraf dist/"
27
27
  },
28
28
  "main": "dist/index.css",
29
- "gitHead": "4766ef32fee6ce562eaed000704875bb894116fe"
29
+ "gitHead": "af3cead2a5d2166c2e726f364ac6148654802d3e"
30
30
  }