@gemeentenijmegen/components-css 0.0.1-alpha.11 → 0.0.1-alpha.111

package/link-list/_mixin.scss

@@ -4,11 +4,12 @@
   all: unset;
   display: flex;
   flex-direction: column;
+  margin-block-end: var(--nijmegen-link-list-margin-block-end);
   row-gap: var(--nijmegen-link-list-row-gap, 0.5rem);
 }
 
 @mixin nijmegen-link-list__item {
-  display: inline-block;
+  display: inline-flex;
   list-style: none;
 }
 
@@ -16,6 +17,7 @@
   background-color: var(--utrecht-link-color);
   content: "";
   display: inline-block;
+  flex-shrink: 0;
   height: var(--nijmegen-icon-functional-size-height, 0.875rem); /* stylelint-disable-line property-disallowed-list */
   mask-image: var(
     --nijmegen-link-list-icon,
@@ -24,11 +26,16 @@
   mask-position: center;
   mask-repeat: no-repeat;
   mask-size: 100%;
+  position: relative;
+  top: 2px; /* stylelint-disable-line property-disallowed-list */
   width: var(--nijmegen-icon-functional-size-width, 1.5rem); /* stylelint-disable-line property-disallowed-list */
 }
 
 @mixin nijmegen-link-list__link {
+  align-items: baseline;
   color: var(--utrecht-link-color);
+  display: inline-flex;
+  gap: var(--todo-link-list-item-column-gap); /* stylelint-disable-line custom-property-pattern */
   text-decoration: var(--nijmegen-link-list-item-text-decoration, none);
   &:active,
   &.nijmegen-link-list__link--active {

package/link-list/index.scss

@@ -7,9 +7,22 @@
   @include nijmegen-link-list__item;
 }
 
-.nijmegen-link-list__link:any-link {
-  @include nijmegen-link-list__link;
-  &::before {
-    @include nijmegen-link-list__link-before;
+.nijmegen-link-list__link {
+  &:any-link {
+    @include nijmegen-link-list__link;
+  }
+
+  &.nijmegen-link-list__link--no-chevron {
+    align-items: center;
+
+    svg {
+      flex-shrink: 0;
+    }
+  }
+
+  &:not(.nijmegen-link-list__link--no-chevron) {
+    &::before {
+      @include nijmegen-link-list__link-before;
+    }
   }
 }

package/listbox/index.scss

@@ -0,0 +1,81 @@
+@import "~@utrecht/link-css/src/mixin";
+@import "~@utrecht/focus-ring-css/src/mixin";
+@import "~@utrecht/unordered-list-css/src/mixin";
+
+.nijmegen-listbox {
+  background-color: var(--nijmegen-listbox-background-color);
+  border-color: var(--nijmegen-listbox-border-color);
+  border-radius: var(--nijmegen-listbox-border-radius);
+  border-style: solid;
+  border-width: var(--nijmegen-listbox-border-width);
+  box-sizing: border-box;
+  color: var(--nijmegen-listbox-color);
+  margin-block-end: var(--nijmegen-listbox-margin-block-end);
+  max-block-size: var(--nijmegen-listbox-max-block-size);
+  min-inline-size: var(--nijmegen-listbox-min-inline-size);
+}
+
+.nijmegen-listbox__list {
+  @include utrecht-unordered-list;
+
+  list-style: none;
+  padding-inline-start: 0;
+}
+
+.nijmegen-listbox__item {
+  align-items: center;
+  background-color: var(--nijmegen-listbox-item-background-color);
+  box-sizing: border-box;
+  color: var(--nijmegen-listbox-item-color);
+  display: flex;
+  font-family: var(--nijmegen-listbox-item-font-family);
+  font-size: var(--nijmegen-listbox-item-font-size);
+  font-weight: var(--nijmegen-listbox-item-font-weight);
+  gap: var(--nijmegen-listbox-item-column-gap);
+  line-height: var(--nijmegen-listbox-item-line-height);
+  min-block-size: var(--nijmegen-listbox-item-min-block-size);
+  padding-block-end: var(--nijmegen-listbox-item-padding-block-end);
+  padding-block-start: var(--nijmegen-listbox-item-padding-block-start);
+  padding-inline-end: var(--nijmegen-listbox-item-padding-inline-end);
+  padding-inline-start: var(--nijmegen-listbox-item-padding-inline-start);
+  text-decoration: none;
+
+  &::before {
+    background-color: currentColor;
+    content: "";
+    display: inline-block;
+    height: var(--nijmegen-icon-functional-size-height, 0.875rem); /* stylelint-disable-line property-disallowed-list */
+    mask-image: var(
+      --nijmegen-link-list-icon,
+      url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6l-6 6"></path></svg>')
+    );
+    mask-position: center;
+    mask-repeat: no-repeat;
+    mask-size: 100%;
+    width: var(--nijmegen-icon-functional-size-width, 1.5rem); /* stylelint-disable-line property-disallowed-list */
+  }
+
+  &:active,
+  &.nijmegen-listbox__item--active {
+    background-color: var(--nijmegen-listbox-item-active-background-color);
+    color: var(--nijmegen-listbox-item-active-color);
+  }
+
+  &:hover,
+  &.nijmegen-listbox__item--hover {
+    @include utrecht-link--hover;
+
+    background-color: var(--nijmegen-listbox-item-hover-background-color);
+    color: var(--nijmegen-listbox-item-hover-color);
+    cursor: pointer;
+  }
+
+  &:focus-visible,
+  &.nijmegen-listbox__item--focus-visible {
+    @include utrecht-link--focus;
+    @include utrecht-link--focus-visible;
+
+    background-color: var(--nijmegen-listbox-item-focus-visible-background-color);
+    color: var(--nijmegen-listbox-item-focus-visible-color);
+  }
+}

package/mega-menu/index.scss

@@ -0,0 +1,61 @@
+@import "~@gemeentenijmegen/layout-css/src/variables";
+
+.nijmegen-mega-menu {
+  background-color: var(--nijmegen-mega-menu-background-color, #fff);
+  border: 0 solid var(--nijmegen-mega-menu-border-color, transparent);
+  border-block-start-width: var(--nijmegen-mega-menu-border-block-end-width, 1px);
+  margin-block-end: var(--nijmegen-mega-menu-margin-block-end);
+  writing-mode: horizontal-tb;
+}
+
+.nijmegen-mega-menu__container {
+  margin-inline: auto;
+  max-inline-size: var(--nijmegen-header-content-max-inline-size, 100%);
+}
+
+.nijmegen-mega-menu__content {
+  column-gap: var(--nijmegen-mega-menu-content-column-gap, 0);
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  margin-inline: auto;
+  padding-block-end: var(--nijmegen-mega-menu-content-padding-block-end, 0);
+  padding-block-start: var(--nijmegen-mega-menu-content-padding-block-start, 0);
+  padding-inline-end: var(--nijmegen-mega-menu-content-padding-inline-end, 0);
+  padding-inline-start: var(--nijmegen-mega-menu-content-padding-inline-start, 0);
+  row-gap: var(--nijmegen-mega-menu-content-row-gap, 0);
+
+  .utrecht-heading-4 {
+    font-size: 1.25rem;
+  }
+
+  > div {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nijmegen-mega-menu-list-row-gap);
+  }
+
+  > * {
+    flex-basis: 100%;
+    @media (width >= $nijmegen-breakpoint-md) {
+      &:only-child {
+        flex-basis: 100%;
+      }
+
+      flex-basis: calc((100% - (var(--nijmegen-mega-menu-content-column-gap, 0) * 2)) / 3);
+    }
+    @media (width >=$nijmegen-breakpoint-lg) {
+      &:only-child {
+        flex-basis: 100%;
+      }
+
+      flex-basis: calc((100% - (var(--nijmegen-mega-menu-content-column-gap, 0) * 3)) / 4);
+    }
+  }
+  &.nijmegen-mega-menu__content--full-width {
+    > * {
+      flex-basis: 100%;
+    }
+  }
+}

package/menu.scss

@@ -0,0 +1,5 @@
+@import "./header/index";
+@import "./toolbar-button/index";
+@import "./mega-menu/index";
+@import "./mobile-menu/index";
+@import "./link-list/index";

package/metadata/index.scss

@@ -0,0 +1,31 @@
+/* stylelint-disable no-descending-specificity */
+
+@import "~@utrecht/unordered-list-css/src/mixin";
+
+.nijmegen-metadata {
+  @include utrecht-unordered-list;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--nijmegen-space-50);
+  padding-inline-start: 0;
+
+  &.nijmegen-metadata__horizontal {
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    .nijmegen-metadata__item {
+      padding-inline-end: var(--nijmegen-space-50);
+    }
+  }
+}
+
+.nijmegen-metadata__item {
+  align-items: center;
+  display: flex;
+  gap: var(--nijmegen-space-50);
+
+  svg {
+    block-size: var(--nijmegen-icon-functional-size);
+  }
+}

package/mobile-menu/_mixin.scss

@@ -0,0 +1,11 @@
+@mixin nijmegen-mobile-menu-icon-base {
+  background-color: currentColor;
+  content: "";
+  display: inline-block;
+  /* stylelint-disable-next-line property-disallowed-list */
+  height: var(--nijmegen-header-item-icon-size, 1.5rem);
+  mask-position: center;
+  mask-repeat: no-repeat;
+  mask-size: 100%;
+  width: var(--nijmegen-header-item-icon-size, 1.5rem); /* stylelint-disable-line property-disallowed-list */
+}

package/mobile-menu/index.scss

@@ -0,0 +1,180 @@
+@import "~@gemeentenijmegen/layout-css/src/variables";
+@import "~@utrecht/link-css/src/mixin";
+@import "~@utrecht/focus-ring-css/src/mixin";
+@import "./mixin";
+
+.nijmegen-mobile-menu {
+  background-color: var(--nijmegen-menu-background-color);
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  position: relative;
+}
+
+.nijmegen-mobile-menu__list {
+  display: flex;
+  flex-direction: column;
+  line-height: var(--nijmegen-menu-link-line-height);
+  list-style: none;
+  margin: 0; /* stylelint-disable-line property-disallowed-list */
+  padding-inline-start: 0;
+}
+
+.nijmegen-mobile-menu__link {
+  background-color: var(--nijmegen-menu-background-color);
+  box-sizing: border-box;
+  color: var(--nijmegen-menu-link-color);
+  cursor: pointer;
+  display: flex;
+  font-family: var(--nijmegen-menu-link-font-family);
+  font-size: var(--nijmegen-menu-link-font-size);
+  font-weight: var(--nijmegen-menu-link-font-weight);
+  justify-content: space-between;
+  padding-block-end: var(--nijmegen-menu-link-padding-block-end);
+  padding-block-start: var(--nijmegen-menu-link-padding-block-start);
+  padding-inline-end: var(--nijmegen-menu-link-padding-inline-end);
+  padding-inline-start: var(--nijmegen-menu-link-padding-inline-start);
+  position: relative;
+  text-decoration: none;
+  width: 100%; /* stylelint-disable-line property-disallowed-list */
+
+  &:is(button) {
+    appearance: none;
+    border: 0;
+  }
+
+  &:focus,
+  &.nijmegen-mobile-menu__link--focus {
+    @include utrecht-link--focus;
+  }
+
+  &:focus-visible,
+  &.nijmegen-mobile-menu__link--focus-visible {
+    @include utrecht-link--focus;
+    @include utrecht-link--focus-visible;
+  }
+
+  span {
+    align-items: center;
+    display: inline-flex;
+    gap: var(--nijmegen-menu-link-column-gap);
+  }
+
+  svg {
+    stroke: currentColor;
+  }
+
+  &--small {
+    font-size: var(--nijmegen-menu-link-small-font-size);
+    padding-block-end: var(--nijmegen-menu-link-small-padding-block-end);
+    padding-block-start: var(--nijmegen-menu-link-small-padding-block-start);
+    padding-inline-end: var(--nijmegen-menu-link-small-padding-inline-end);
+    padding-inline-start: var(--nijmegen-menu-link-small-padding-inline-start);
+
+    span {
+      gap: var(--nijmegen-menu-link-small-column-gap);
+    }
+  }
+
+  &--strong {
+    font-weight: var(--nijmegen-menu-link-level-1-font-weight);
+  }
+
+  &--back {
+    font-weight: var(--nijmegen-menu-link-level-1-font-weight);
+    padding-block-end: var(--nijmegen-menu-button-padding-block-end);
+    padding-block-start: var(--nijmegen-menu-button-padding-block-start);
+    padding-inline-end: var(--nijmegen-menu-button-padding-inline-end);
+    padding-inline-start: var(--nijmegen-menu-button-padding-inline-start);
+
+    span::before {
+      @include nijmegen-mobile-menu-icon-base;
+
+      mask-image: var(
+        --nijmegen-header-item-open-icon-image,
+        url('data:image/svg+xml,<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 6l-6 6l6 6" /></svg>')
+      );
+    }
+  }
+
+  &--current {
+    color: var(--nijmegen-menu-link-current-color);
+    font-weight: var(--nijmegen-menu-link-current-font-weight, 600);
+
+    &::after {
+      border-inline-start-color: var(--nijmegen-menu-link-current-border-color);
+      border-inline-start-style: solid;
+      border-inline-start-width: var(--nijmegen-menu-link-current-border-width, 4px);
+      content: "";
+      inset: 0;
+      position: absolute;
+    }
+  }
+
+  &--expanded,
+  &[aria-expanded="true"] {
+    background-color: var(--nijmegen-menu-link-expanded-background-color);
+    color: var(--nijmegen-menu-link-expanded-color);
+    font-weight: var(--nijmegen-menu-link-expanded-font-weight, 600);
+
+    svg,
+    &::after {
+      transform: scaleY(-1);
+    }
+  }
+
+  &--chevron::after {
+    @include nijmegen-mobile-menu-icon-base;
+
+    mask-image: var(
+      --nijmegen-header-item-open-icon-image,
+      url('data:image/svg+xml,<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-down"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6 9l6 6l6 -6" /></svg>')
+    );
+  }
+
+  &--arrow::after {
+    @include nijmegen-mobile-menu-icon-base;
+
+    mask-image: var(
+      --nijmegen-header-item-open-icon-image,
+      url('data:image/svg+xml,<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-right"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l14 0" /><path d="M13 18l6 -6" /><path d="M13 6l6 6" /></svg>')
+    );
+  }
+}
+
+.nijmegen-mobile-menu__details-content {
+  display: none;
+}
+
+.nijmegen-mobile-menu__details {
+  .nijmegen-mobile-menu__list {
+    display: none;
+  }
+
+  &--open {
+    .nijmegen-mobile-menu__list {
+      display: block;
+    }
+  }
+}
+
+.nijmegen-mobile-menu__separator {
+  padding-inline-end: var(--nijmegen-menu-link-padding-inline-end);
+  padding-inline-start: var(--nijmegen-menu-link-padding-inline-start);
+}
+
+.nijmegen-mobile-menu__panel {
+  background-color: var(--nijmegen-menu-background-color);
+  display: none;
+  flex-direction: column;
+  gap: var(--nijmegen-menu-link-column-gap);
+  inset: 0;
+  min-height: 100%; /* stylelint-disable-line property-disallowed-list */
+  position: absolute;
+  width: 100%; /* stylelint-disable-line property-disallowed-list */
+  z-index: 10;
+
+  &--active {
+    display: flex;
+  }
+}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.1-alpha.11",
+  "version": "0.0.1-alpha.111",
   "author": "Community for NL Design System",
   "description": "CSS Components for a design system based on the NL Design System architecture",
   "license": "EUPL-1.2",
@@ -11,7 +11,8 @@
   "scripts": {
     "build": "rollup -c ./rollup.config.mjs",
     "watch": "rollup -c ./rollup.config.mjs --watch",
-    "clean": "rimraf dist"
+    "clean": "rimraf dist",
+    "generate:spacing": "node ./spacing/getSpacing.mjs"
   },
   "main": "dist/index.min.css",
   "private": false,
@@ -23,12 +24,16 @@
     "url": "git@github.com:GemeenteNijmegen/design-system.git"
   },
   "devDependencies": {
-    "@gemeentenijmegen/layout-css": "0.0.1-alpha.24",
+    "@gemeentenijmegen/layout-css": "0.0.1-alpha.124",
+    "@rollup/plugin-terser": "0.4.4",
+    "@utrecht/button-css": "2.3.1",
     "@utrecht/focus-ring-css": "2.3.1",
     "@utrecht/link-css": "1.6.0",
+    "@utrecht/textbox-css": "3.0.1",
+    "@utrecht/unordered-list-css": "1.5.1",
     "postcss-discard-duplicates": "7.0.1",
     "rollup": "4.12.1",
     "rollup-plugin-postcss": "4.0.2"
   },
-  "gitHead": "5a9d4c6276f8dffbcc9431bdf7069529349a3454"
+  "gitHead": "738a0a6a92308311f21d17612712bcfd1bac757c"
 }

package/pagination/_mixin.scss

@@ -0,0 +1,41 @@
+@mixin nijmegen-pagination-link {
+  align-items: center;
+  box-sizing: border-box;
+  display: inline-flex;
+  justify-content: center;
+  text-decoration: none;
+}
+
+@mixin nijmegen-pagination-link-chevron {
+  background-color: currentColor;
+  content: "";
+  /* stylelint-disable-next-line property-disallowed-list */
+  height: var(--nijmegen-pagination-relative-link-icon-size, 1.5rem);
+  mask-image: var(
+    --nijmegen-pagination-relative-icon,
+    url('data:image/svg+xml,<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-right"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l14 0" /><path d="M13 18l6 -6" /><path d="M13 6l6 6" /></svg>')
+  );
+  mask-position: center;
+  mask-repeat: no-repeat;
+  mask-size: 100%;
+  /* stylelint-disable-next-line property-disallowed-list */
+  width: var(--nijmegen-pagination-relative-link-icon-size, 1.5rem);
+}
+
+@mixin invisible-but-accessible {
+  block-size: 1px !important;
+
+  /* Source: https://kittygiraudel.com/snippets/sr-only-class/ */
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  -webkit-clip-path: inset(50%) !important;
+  clip-path: inset(50%) !important;
+  inline-size: 1px !important;
+  /* stylelint-disable-next-line property-disallowed-list */
+  margin: -1px !important;
+  overflow: hidden !important;
+  /* stylelint-disable-next-line property-disallowed-list */
+  padding: 0 !important;
+  position: absolute !important;
+  white-space: nowrap !important;
+}