npm - @lux-design-system/components-react - Versions diffs - 1.2.2 → 1.2.3 - Mend

@lux-design-system/components-react 1.2.2 → 1.2.3

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 (3) hide show

package/dist/index.mjs CHANGED Viewed

@@ -10432,7 +10432,7 @@ export {
   try {
     if (typeof document != "undefined") {
       var elementStyle = document.createElement("style");
-      elementStyle.appendChild(document.createTextNode('.lux-alert {\n  --utrecht-heading-1-color: var(--utrecht-alert-color);\n  --utrecht-heading-1-font-size: var(--lux-alert-heading-font-size);\n  --utrecht-heading-1-font-family: var(--lux-alert-heading-font-family);\n  --utrecht-heading-1-font-weight: var(--lux-alert-heading-font-weight);\n  --utrecht-heading-1-line-height: var(--lux-alert-heading-line-height);\n  --utrecht-heading-2-color: var(--utrecht-alert-color);\n  --utrecht-heading-2-font-size: var(--lux-alert-heading-font-size);\n  --utrecht-heading-2-font-family: var(--lux-alert-heading-font-family);\n  --utrecht-heading-2-font-weight: var(--lux-alert-heading-font-weight);\n  --utrecht-heading-2-line-height: var(--lux-alert-heading-line-height);\n  --utrecht-heading-3-color: var(--utrecht-alert-color);\n  --utrecht-heading-3-font-size: var(--lux-alert-heading-font-size);\n  --utrecht-heading-3-font-family: var(--lux-alert-heading-font-family);\n  --utrecht-heading-3-font-weight: var(--lux-alert-heading-font-weight);\n  --utrecht-heading-3-line-height: var(--lux-alert-heading-line-height);\n  --utrecht-heading-4-color: var(--utrecht-alert-color);\n  --utrecht-heading-4-font-size: var(--lux-alert-heading-font-size);\n  --utrecht-heading-4-font-family: var(--lux-alert-heading-font-family);\n  --utrecht-heading-4-font-weight: var(--lux-alert-heading-font-weight);\n  --utrecht-heading-4-line-height: var(--lux-alert-heading-line-height);\n  --utrecht-heading-5-color: var(--utrecht-alert-color);\n  --utrecht-heading-5-font-size: var(--lux-alert-heading-font-size);\n  --utrecht-heading-5-font-family: var(--lux-alert-heading-font-family);\n  --utrecht-heading-5-font-weight: var(--lux-alert-heading-font-weight);\n  --utrecht-heading-5-line-height: var(--lux-alert-heading-line-height);\n  --utrecht-heading-6-color: var(--utrecht-alert-color);\n  --utrecht-heading-6-font-size: var(--lux-alert-heading-font-size);\n  --utrecht-heading-6-font-family: var(--lux-alert-heading-font-family);\n  --utrecht-heading-6-font-weight: var(--lux-alert-heading-font-weight);\n  --utrecht-heading-6-line-height: var(--lux-alert-heading-line-height);\n  --utrecht-paragraph-color: var(--utrecht-alert-color);\n\n  .utrecht-alert__icon {\n    block-size: var(--lux-alert-heading-line-height);\n  }\n}\n.lux-button {\n  display: inline-flex;\n}\n\n.lux-button--small {\n  padding-block-start: var(--lux-button-small-padding-block-start);\n  padding-block-end: var(--lux-button-small-padding-block-end);\n  min-inline-size: var(--lux-button-small-min-inline-size);\n  min-block-size: var(--lux-button-small-min-block-size);\n}\n\n.lux-button-icon--start {\n  order: 0;\n}\n\n.lux-button-icon--end {\n  order: 1;\n}\n:root {\n  /* Just for an example */\n  --lux-checkbox-target-hover-background-color: hsla(0 0% 76% / 19%);\n  --lux-checkbox-target-border-radius: 50%;\n}\n\n.lux-checkbox:checked:focus {\n  border-color: var(--lux-checkbox-checked-focus-border-color);\n  background-color: var(--lux-checkbox-checked-focus-background-color);\n  color: var(--lux-checkbox-checked-focus-color);\n}\n\n.lux-checkbox:checked:hover {\n  border-color: var(--lux-checkbox-checked-hover-border-color);\n  background-color: var(--lux-checkbox-checked-hover-background-color);\n  color: var(--lux-checkbox-checked-hover-color);\n}\n\n.lux-checkbox:checked:active {\n  border-color: var(--lux-checkbox-checked-active-border-color);\n  background-color: var(--lux-checkbox-checked-active-background-color);\n  color: var(--lux-checkbox-checked-active-color);\n}\n\n.lux-checkbox:checked:disabled {\n  border-color: var(--lux-checkbox-checked-disabled-border-color);\n  background-color: var(--lux-checkbox-checked-disabled-background-color);\n  color: var(--lux-checkbox-checked-disabled-color);\n}\n\n.lux-checkbox--disabled {\n  cursor: not-allowed;\n}\n\n.lux-checkbox--with-target {\n  display: inline-grid;\n  grid-template-areas: "input";\n  place-content: center center;\n}\n\n.lux-checkbox--with-target::before,\n.lux-checkbox--with-target::after {\n  grid-area: input;\n  min-inline-size: 44px;\n  min-block-size: 44px;\n  content: "";\n}\n\n.lux-checkbox--with-target:hover::after {\n  border-radius: var(--lux-checkbox-target-border-radius);\n  background-color: var(--lux-checkbox-target-hover-background-color);\n}\n/* stylelint-disable-next-line scss/load-no-partial-leading-underscore */\n/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n/* stylelint-disable-next-line block-no-empty */\n:root {\n  --lux-form-field-checkbox-inner-column-gap: var(--lux-space-100);\n  --lux-form-field-checkbox-inner-padding-inline-start: var(--lux-space-200, 0.5rem);\n  --lux-form-field-checkbox-inner-padding-inline-end: var(--lux-space-200, 0.5rem);\n  --lux-form-field-checkbox-inner-padding-block-start: var(--lux-space-200, 0.5rem);\n  --lux-form-field-checkbox-inner-padding-block-end: var(--lux-space-200, 0.5rem);\n  --lux-form-field-checkbox-inner-border-radius: var(--lux-border-radius-default);\n  --lux-form-field-checkbox-inner-border-width: var(--lux-border-width-default, 1px);\n  --lux-form-field-checkbox-inner-border-style: solid;\n  --lux-form-field-checkbox-inner-color: var(--lux-color-foreground-default);\n  --lux-form-field-checkbox-inner-border-color: var(--lux-color-brand-default);\n  --lux-form-field-checkbox-inner-background-color: var(--lux-color-none);\n  --lux-form-field-checkbox-invalid-inner-border-color: var(--lux-color-feedback-error-default);\n  --lux-form-field-checkbox-invalid-inner-background-color: var(--lux-color-none);\n  --lux-form-field-checkbox-invalid-inner-row-gap: var(--lux-space-100);\n  --lux-form-field-checkbox-hover-inner-color: var(--lux-color-foreground-default);\n  --lux-form-field-checkbox-hover-inner-border-color: var(--lux-color-brand-default);\n  --lux-form-field-checkbox-hover-inner-background-color: var(--lux-color-brand-subdued);\n  --lux-form-field-checkbox-focus-visible-inner-color: var(--lux-color-foreground-default);\n  --lux-form-field-checkbox-focus-visible-inner-border-color: var(--lux-color-brand-default);\n  --lux-form-field-checkbox-focus-visible-inner-background-color: var(--lux-color-none);\n  --lux-form-field-checkbox-disabled-inner-color: var(--lux-color-foreground-default);\n  --lux-form-field-checkbox-disabled-inner-border-color: var(--lux-color-border-subdued);\n  --lux-form-field-checkbox-disabled-inner-background-color: var(--lux-color-none);\n}\n\n.lux-form-field.lux-form-field-checkbox {\n  /* prettier-ignore */\n  --_lux-checkbox-size: calc(var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end) + var(--lux-form-field-checkbox-inner-padding-inline-start));\n  --_lux-column-gap: var(--lux-form-field-checkbox-inner-column-gap, var(--utrecht-checkbox-margin-inline-end, 12px));\n  position: relative;\n  grid-template-columns: var(--_lux-checkbox-size) 100fr;\n  grid-template-areas: "input label" ". description" "error-message error-message";\n  gap: 0 var(--_lux-column-gap);\n}\n.lux-form-field.lux-form-field-checkbox::before {\n  grid-row-start: label;\n  grid-row-end: description;\n  grid-column-start: input;\n  grid-column-end: description;\n  border: var(--lux-form-field-checkbox-inner-border-width) var(--lux-form-field-checkbox-inner-border-style) var(--lux-form-field-checkbox-inner-border-color);\n  border-radius: var(--lux-form-field-checkbox-inner-border-radius);\n  pointer-events: none;\n  content: "";\n}\n.lux-form-field.lux-form-field-checkbox--disabled::before {\n  border-color: var(--lux-form-field-checkbox-disabled-inner-border-color);\n  background-color: var(--lux-form-field-checkbox-disabled-inner-background-color);\n  color: var(--lux-form-field-checkbox-disabled-inner-color);\n}\n.lux-form-field.lux-form-field-checkbox--invalid::before {\n  border-color: var(--lux-form-field-checkbox-invalid-inner-border-color);\n  background-color: var(--lux-form-field-checkbox-invalid-inner-background-color);\n  color: var(--lux-form-field-checkbox-invalid-inner-color);\n}\n.lux-form-field.lux-form-field-checkbox:has(:focus-visible)::before {\n  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);\n  /* - The browser default focus ring should apply when these CSS custom properties are not set.\n   * - Make the `box-shadow` value available, so components that have their own `box-shadow`\n   *   can combine it with the focus ring box shadow.\n   */\n  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);\n  box-shadow: var(--_utrecht-focus-ring-box-shadow);\n  outline-color: var(--utrecht-focus-outline-color, revert);\n  outline-offset: var(--utrecht-focus-outline-offset, revert);\n  outline-style: var(--utrecht-focus-outline-style, revert);\n  outline-width: var(--utrecht-focus-outline-width, revert);\n  z-index: 1;\n  z-index: auto;\n  border-color: var(--lux-form-field-checkbox-focus-visible-inner-border-color);\n  background-color: var(--lux-form-field-checkbox-focus-visible-inner-background-color);\n  color: var(--lux-form-field-checkbox-focus-visible-inner-color);\n}\n.lux-form-field.lux-form-field-checkbox .utrecht-checkbox:focus-visible {\n  outline: none;\n}\n.lux-form-field.lux-form-field-checkbox--with-target:not(.lux-form-field.lux-form-field-checkbox--disabled):has(.utrecht-form-field__input .utrecht-checkbox:hover)::before {\n  border-color: var(--lux-form-field-checkbox-hover-inner-border-color);\n  background-color: var(--lux-form-field-checkbox-hover-inner-background-color);\n  color: var(--lux-form-field-checkbox-hover-inner-color);\n}\n.lux-form-field.lux-form-field-checkbox--with-target .lux-form-field.lux-form-field-checkbox__label::before, .lux-form-field.lux-form-field-checkbox--with-target .lux-form-field.lux-form-field-checkbox__description label::before {\n  position: absolute;\n  inset-block-end: 0;\n  inset-block-start: 0;\n  inset-inline-end: 0;\n  inset-inline-start: calc(-1 * var(--_lux-checkbox-size) - var(--_lux-column-gap));\n  pointer-events: visible;\n  content: "";\n}\n.lux-form-field.lux-form-field-checkbox .utrecht-form-field__label,\n.lux-form-field.lux-form-field-checkbox .utrecht-form-field__description {\n  position: relative;\n}\n.lux-form-field.lux-form-field-checkbox .utrecht-form-field__label,\n.lux-form-field.lux-form-field-checkbox .utrecht-form-field__input {\n  padding-block-start: var(--lux-form-field-checkbox-inner-padding-block-start);\n}\n.lux-form-field.lux-form-field-checkbox .utrecht-form-field__label + .utrecht-form-field__input,\n.lux-form-field.lux-form-field-checkbox .utrecht-form-field__description {\n  padding-block-end: var(--lux-form-field-checkbox-inner-padding-block-end);\n}\n.lux-form-field.lux-form-field-checkbox .utrecht-form-field__input {\n  display: grid;\n  place-content: baseline center;\n  padding-inline-start: var(--lux-form-field-checkbox-inner-padding-inline-start);\n}\n.lux-form-field.lux-form-field-checkbox .utrecht-form-field__error-message {\n  padding-block-start: var(--lux-form-field-checkbox-invalid-inner-row-gap);\n}/* TODO: Replace tokens or fix in Utrecht code */\n.lux-select {\n  box-shadow: inset 0 0 0 var(--utrecht-select-border-width) var(--utrecht-select-border-color);\n  border: 0;\n  line-height: var(--utrecht-select-line-height);\n\n  &.utrecht-select--invalid {\n    box-shadow: inset 0 0 0 var(--utrecht-select-invalid-border-width) var(--utrecht-select-invalid-border-color);\n  }\n\n  &:not([multiple]) {\n    background-position: center right var(--utrecht-select-padding-inline-end);\n    background-size: var(--lux-select-icon-size);\n  }\n\n  &:focus {\n    box-shadow: inset 0 0 0 var(--lux-select-focus-border-width) var(--utrecht-select-focus-border-color);\n  }\n\n  &:focus-visible {\n    outline-offset: var(--utrecht-focus-outline-offset, revert);\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 var(--lux-select-hover-border-width) var(--utrecht-select-hover-border-color);\n    background-color: var(--utrecht-select-hover-background-color);\n    color: var(--utrecht-select-hover-color);\n  }\n}\n.utrecht-textarea--read-only,\n.utrecht-textarea--html-textarea:read-only {\n  border-color: var(\n    --utrecht-textarea-read-only-border-color,\n    var(\n      --utrecht-form-control-read-only-border-color,\n      var(--utrecht-textarea-border, var(--utrecht-form-control-border-color))\n    )\n  );\n  background-color: var(\n    --utrecht-textarea-read-only-background-color,\n    var(\n      --utrecht-form-control-read-only-background-color,\n      var(--utrecht-textarea-border, var(--utrecht-form-control-background-color))\n    )\n  );\n}\n/* stylelint-disable scss/operator-no-newline-after */\n.lux-radio-button {\n  margin-block-start: calc(\n    (\n        var(--utrecht-document-line-height, inherit) - var(--utrecht-radio-button-size, 1em) -\n          var(--utrecht-radio-button-border-width)\n      ) / 2\n  );\n  background-image: radial-gradient(\n    circle,\n    var(--_utrecht-radio-button-color, transparent) calc((var(--_utrecht-radio-button-icon-size, 50%) / 2) - 5%),\n    var(--_utrecht-radio-button-background-color, currentColor) calc((var(--_utrecht-radio-button-icon-size, 50%) / 2))\n  );\n  min-inline-size: var(--utrecht-radio-button-size, 1em);\n  min-block-size: var(--utrecht-radio-button-size, 1em);\n}\n.lux-radio-button__container {\n  display: inline flex;\n  align-items: start;\n}\n.lux-radio-group {\n  display: flex;\n  row-gap: var(--lux-radio-group-row-gap);\n  flex-direction: column;\n}\n\n.lux-radio-group__options {\n  display: flex;\n  row-gap: var(--lux-radio-group-row-gap);\n  flex-direction: column;\n}\n\n.lux-radio-group__fieldset {\n  border: 0;\n}\n.utrecht-link--html-span:active,\n.utrecht-link--html-a:any-link:active,\n.utrecht-link--active,\n.utrecht-link--visited {\n  --_utrecht-link-state-text-decoration-color: var(--utrecht-link-active-color);\n}\n\n.lux-link {\n  display: inline flex;\n  align-items: baseline;\n  gap: var(--lux-link-column-gap);\n}\n\n.lux-link-icon--start {\n  order: 0;\n}\n\n.lux-link-icon--end {\n  order: 1;\n}\n.utrecht-link.utrecht-link-list__link {\n  &:active,\n  &:hover {\n    --utrecht-link-hover-text-decoration: var(--lux-link-list-link-hover-text-decoration);\n  }\n\n  &:visited {\n    color: var(--utrecht-link-visited-color);\n  }\n}\n.lux-section {\n  display: flex;\n  row-gap: var(--lux-section-row-gap);\n  flex-direction: column;\n  justify-content: start;\n  border-radius: var(--lux-section-border-radius);\n  background-color: var(--lux-section-background-color);\n  padding-inline-start: var(--lux-section-padding-inline-start);\n  padding-inline-end: var(--lux-section-padding-inline-end);\n  padding-block-start: var(--lux-section-padding-block-start);\n  padding-block-end: var(--lux-section-padding-block-end);\n}'));
+      elementStyle.appendChild(document.createTextNode('.lux-alert {\n  --utrecht-heading-1-color: var(--utrecht-alert-color);\n  --utrecht-heading-1-font-size: var(--lux-alert-heading-font-size);\n  --utrecht-heading-1-font-family: var(--lux-alert-heading-font-family);\n  --utrecht-heading-1-font-weight: var(--lux-alert-heading-font-weight);\n  --utrecht-heading-1-line-height: var(--lux-alert-heading-line-height);\n  --utrecht-heading-2-color: var(--utrecht-alert-color);\n  --utrecht-heading-2-font-size: var(--lux-alert-heading-font-size);\n  --utrecht-heading-2-font-family: var(--lux-alert-heading-font-family);\n  --utrecht-heading-2-font-weight: var(--lux-alert-heading-font-weight);\n  --utrecht-heading-2-line-height: var(--lux-alert-heading-line-height);\n  --utrecht-heading-3-color: var(--utrecht-alert-color);\n  --utrecht-heading-3-font-size: var(--lux-alert-heading-font-size);\n  --utrecht-heading-3-font-family: var(--lux-alert-heading-font-family);\n  --utrecht-heading-3-font-weight: var(--lux-alert-heading-font-weight);\n  --utrecht-heading-3-line-height: var(--lux-alert-heading-line-height);\n  --utrecht-heading-4-color: var(--utrecht-alert-color);\n  --utrecht-heading-4-font-size: var(--lux-alert-heading-font-size);\n  --utrecht-heading-4-font-family: var(--lux-alert-heading-font-family);\n  --utrecht-heading-4-font-weight: var(--lux-alert-heading-font-weight);\n  --utrecht-heading-4-line-height: var(--lux-alert-heading-line-height);\n  --utrecht-heading-5-color: var(--utrecht-alert-color);\n  --utrecht-heading-5-font-size: var(--lux-alert-heading-font-size);\n  --utrecht-heading-5-font-family: var(--lux-alert-heading-font-family);\n  --utrecht-heading-5-font-weight: var(--lux-alert-heading-font-weight);\n  --utrecht-heading-5-line-height: var(--lux-alert-heading-line-height);\n  --utrecht-heading-6-color: var(--utrecht-alert-color);\n  --utrecht-heading-6-font-size: var(--lux-alert-heading-font-size);\n  --utrecht-heading-6-font-family: var(--lux-alert-heading-font-family);\n  --utrecht-heading-6-font-weight: var(--lux-alert-heading-font-weight);\n  --utrecht-heading-6-line-height: var(--lux-alert-heading-line-height);\n  --utrecht-paragraph-color: var(--utrecht-alert-color);\n\n  .utrecht-alert__icon {\n    block-size: var(--lux-alert-heading-line-height);\n  }\n}\n.lux-button {\n  display: inline-flex;\n}\n\n.lux-button--small {\n  padding-block-start: var(--lux-button-small-padding-block-start);\n  padding-block-end: var(--lux-button-small-padding-block-end);\n  min-inline-size: var(--lux-button-small-min-inline-size);\n  min-block-size: var(--lux-button-small-min-block-size);\n}\n\n.lux-button-icon--start {\n  order: 0;\n}\n\n.lux-button-icon--end {\n  order: 1;\n}\n:root {\n  /* Just for an example */\n  --lux-checkbox-target-hover-background-color: hsla(0 0% 76% / 19%);\n  --lux-checkbox-target-border-radius: 50%;\n}\n\n.lux-checkbox:checked:focus {\n  border-color: var(--lux-checkbox-checked-focus-border-color);\n  background-color: var(--lux-checkbox-checked-focus-background-color);\n  color: var(--lux-checkbox-checked-focus-color);\n}\n\n.lux-checkbox:checked:hover {\n  border-color: var(--lux-checkbox-checked-hover-border-color);\n  background-color: var(--lux-checkbox-checked-hover-background-color);\n  color: var(--lux-checkbox-checked-hover-color);\n}\n\n.lux-checkbox:checked:active {\n  border-color: var(--lux-checkbox-checked-active-border-color);\n  background-color: var(--lux-checkbox-checked-active-background-color);\n  color: var(--lux-checkbox-checked-active-color);\n}\n\n.lux-checkbox:checked:disabled {\n  border-color: var(--lux-checkbox-checked-disabled-border-color);\n  background-color: var(--lux-checkbox-checked-disabled-background-color);\n  color: var(--lux-checkbox-checked-disabled-color);\n}\n\n.lux-checkbox--disabled {\n  cursor: not-allowed;\n}\n\n.lux-checkbox--with-target {\n  display: inline-grid;\n  grid-template-areas: "input";\n  place-content: center center;\n}\n\n.lux-checkbox--with-target::before,\n.lux-checkbox--with-target::after {\n  grid-area: input;\n  min-inline-size: 44px;\n  min-block-size: 44px;\n  content: "";\n}\n\n.lux-checkbox--with-target:hover::after {\n  border-radius: var(--lux-checkbox-target-border-radius);\n  background-color: var(--lux-checkbox-target-hover-background-color);\n}\n/* stylelint-disable-next-line scss/load-no-partial-leading-underscore */\n/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n/* stylelint-disable-next-line block-no-empty */\n:root {\n  --lux-form-field-checkbox-inner-column-gap: var(--lux-space-100);\n  --lux-form-field-checkbox-inner-padding-inline-start: var(--lux-space-200, 0.5rem);\n  --lux-form-field-checkbox-inner-padding-inline-end: var(--lux-space-200, 0.5rem);\n  --lux-form-field-checkbox-inner-padding-block-start: var(--lux-space-200, 0.5rem);\n  --lux-form-field-checkbox-inner-padding-block-end: var(--lux-space-200, 0.5rem);\n  --lux-form-field-checkbox-inner-border-radius: var(--lux-border-radius-default);\n  --lux-form-field-checkbox-inner-border-width: var(--lux-border-width-default, 1px);\n  --lux-form-field-checkbox-inner-border-style: solid;\n  --lux-form-field-checkbox-inner-color: var(--lux-color-foreground-default);\n  --lux-form-field-checkbox-inner-border-color: var(--lux-color-brand-default);\n  --lux-form-field-checkbox-inner-background-color: var(--lux-color-none);\n  --lux-form-field-checkbox-invalid-inner-border-color: var(--lux-color-feedback-error-default);\n  --lux-form-field-checkbox-invalid-inner-background-color: var(--lux-color-none);\n  --lux-form-field-checkbox-invalid-inner-row-gap: var(--lux-space-100);\n  --lux-form-field-checkbox-hover-inner-color: var(--lux-color-foreground-default);\n  --lux-form-field-checkbox-hover-inner-border-color: var(--lux-color-brand-default);\n  --lux-form-field-checkbox-hover-inner-background-color: var(--lux-color-brand-subdued);\n  --lux-form-field-checkbox-focus-visible-inner-color: var(--lux-color-foreground-default);\n  --lux-form-field-checkbox-focus-visible-inner-border-color: var(--lux-color-brand-default);\n  --lux-form-field-checkbox-focus-visible-inner-background-color: var(--lux-color-none);\n  --lux-form-field-checkbox-disabled-inner-color: var(--lux-color-foreground-default);\n  --lux-form-field-checkbox-disabled-inner-border-color: var(--lux-color-border-subdued);\n  --lux-form-field-checkbox-disabled-inner-background-color: var(--lux-color-none);\n}\n\n.lux-form-field.lux-form-field-checkbox {\n  /* prettier-ignore */\n  --_lux-checkbox-size: calc(var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end) + var(--lux-form-field-checkbox-inner-padding-inline-start));\n  --_lux-column-gap: var(--lux-form-field-checkbox-inner-column-gap, var(--utrecht-checkbox-margin-inline-end, 12px));\n  position: relative;\n  grid-template-columns: var(--_lux-checkbox-size) 100fr;\n  grid-template-areas: "input label" ". description" "error-message error-message";\n  gap: 0 var(--_lux-column-gap);\n}\n.lux-form-field.lux-form-field-checkbox::before {\n  grid-row-start: label;\n  grid-row-end: description;\n  grid-column-start: input;\n  grid-column-end: description;\n  border: var(--lux-form-field-checkbox-inner-border-width) var(--lux-form-field-checkbox-inner-border-style) var(--lux-form-field-checkbox-inner-border-color);\n  border-radius: var(--lux-form-field-checkbox-inner-border-radius);\n  pointer-events: none;\n  content: "";\n}\n.lux-form-field.lux-form-field-checkbox--disabled::before {\n  border-color: var(--lux-form-field-checkbox-disabled-inner-border-color);\n  background-color: var(--lux-form-field-checkbox-disabled-inner-background-color);\n  color: var(--lux-form-field-checkbox-disabled-inner-color);\n}\n.lux-form-field.lux-form-field-checkbox--invalid::before {\n  border-color: var(--lux-form-field-checkbox-invalid-inner-border-color);\n  background-color: var(--lux-form-field-checkbox-invalid-inner-background-color);\n  color: var(--lux-form-field-checkbox-invalid-inner-color);\n}\n.lux-form-field.lux-form-field-checkbox:has(:focus-visible)::before {\n  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);\n  /* - The browser default focus ring should apply when these CSS custom properties are not set.\n   * - Make the `box-shadow` value available, so components that have their own `box-shadow`\n   *   can combine it with the focus ring box shadow.\n   */\n  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);\n  box-shadow: var(--_utrecht-focus-ring-box-shadow);\n  outline-color: var(--utrecht-focus-outline-color, revert);\n  outline-offset: var(--utrecht-focus-outline-offset, revert);\n  outline-style: var(--utrecht-focus-outline-style, revert);\n  outline-width: var(--utrecht-focus-outline-width, revert);\n  z-index: 1;\n  z-index: auto;\n  border-color: var(--lux-form-field-checkbox-focus-visible-inner-border-color);\n  background-color: var(--lux-form-field-checkbox-focus-visible-inner-background-color);\n  color: var(--lux-form-field-checkbox-focus-visible-inner-color);\n}\n.lux-form-field.lux-form-field-checkbox .utrecht-checkbox:focus-visible {\n  outline: none;\n}\n.lux-form-field.lux-form-field-checkbox--with-target:not(.lux-form-field.lux-form-field-checkbox--disabled):has(.utrecht-form-field__input .utrecht-checkbox:hover)::before {\n  border-color: var(--lux-form-field-checkbox-hover-inner-border-color);\n  background-color: var(--lux-form-field-checkbox-hover-inner-background-color);\n  color: var(--lux-form-field-checkbox-hover-inner-color);\n}\n.lux-form-field.lux-form-field-checkbox--with-target .lux-form-field.lux-form-field-checkbox__label::before, .lux-form-field.lux-form-field-checkbox--with-target .lux-form-field.lux-form-field-checkbox__description label::before {\n  position: absolute;\n  inset-block-end: 0;\n  inset-block-start: 0;\n  inset-inline-end: 0;\n  inset-inline-start: calc(-1 * var(--_lux-checkbox-size) - var(--_lux-column-gap));\n  pointer-events: visible;\n  content: "";\n}\n.lux-form-field.lux-form-field-checkbox .utrecht-form-field__label,\n.lux-form-field.lux-form-field-checkbox .utrecht-form-field__description {\n  position: relative;\n}\n.lux-form-field.lux-form-field-checkbox .utrecht-form-field__label,\n.lux-form-field.lux-form-field-checkbox .utrecht-form-field__input {\n  padding-block-start: var(--lux-form-field-checkbox-inner-padding-block-start);\n}\n.lux-form-field.lux-form-field-checkbox .utrecht-form-field__label + .utrecht-form-field__input,\n.lux-form-field.lux-form-field-checkbox .utrecht-form-field__description {\n  padding-block-end: var(--lux-form-field-checkbox-inner-padding-block-end);\n}\n.lux-form-field.lux-form-field-checkbox .utrecht-form-field__input {\n  display: grid;\n  place-content: baseline center;\n  padding-inline-start: var(--lux-form-field-checkbox-inner-padding-inline-start);\n}\n.lux-form-field.lux-form-field-checkbox .utrecht-form-field__error-message {\n  padding-block-start: var(--lux-form-field-checkbox-invalid-inner-row-gap);\n}/* TODO: Replace tokens or fix in Utrecht code */\n.lux-select {\n  box-shadow: inset 0 0 0 var(--utrecht-select-border-width) var(--utrecht-select-border-color);\n  border: 0;\n  line-height: var(--utrecht-select-line-height);\n\n  &.utrecht-select--invalid {\n    box-shadow: inset 0 0 0 var(--utrecht-select-invalid-border-width) var(--utrecht-select-invalid-border-color);\n  }\n\n  &:not([multiple]) {\n    background-position: center right var(--utrecht-select-padding-inline-end);\n    background-size: var(--lux-select-icon-size);\n  }\n\n  &:focus {\n    box-shadow: inset 0 0 0 var(--lux-select-focus-border-width) var(--utrecht-select-focus-border-color);\n  }\n\n  &:focus-visible {\n    outline-offset: var(--utrecht-focus-outline-offset, revert);\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 var(--lux-select-hover-border-width) var(--utrecht-select-hover-border-color);\n    background-color: var(--utrecht-select-hover-background-color);\n    color: var(--utrecht-select-hover-color);\n  }\n}\n.utrecht-textarea--read-only,\n.utrecht-textarea--html-textarea:read-only {\n  border-color: var(\n    --utrecht-textarea-read-only-border-color,\n    var(\n      --utrecht-form-control-read-only-border-color,\n      var(--utrecht-textarea-border, var(--utrecht-form-control-border-color))\n    )\n  );\n  background-color: var(\n    --utrecht-textarea-read-only-background-color,\n    var(\n      --utrecht-form-control-read-only-background-color,\n      var(--utrecht-textarea-border, var(--utrecht-form-control-background-color))\n    )\n  );\n}\n/* stylelint-disable scss/operator-no-newline-after */\n.lux-radio-button {\n  margin-block-start: calc(\n    (\n        var(--utrecht-document-line-height, inherit) - var(--utrecht-radio-button-size, 1em) -\n          var(--utrecht-radio-button-border-width)\n      ) /\n      2\n  );\n  background-image: radial-gradient(\n    circle,\n    var(--_utrecht-radio-button-color, transparent) calc((var(--_utrecht-radio-button-icon-size, 50%) / 2) - 5%),\n    var(--_utrecht-radio-button-background-color, currentColor) calc((var(--_utrecht-radio-button-icon-size, 50%) / 2))\n  );\n  min-inline-size: var(--utrecht-radio-button-size, 1em);\n  min-block-size: var(--utrecht-radio-button-size, 1em);\n}\n.lux-radio-button__container {\n  display: inline flex;\n  align-items: start;\n}\n.lux-radio-group {\n  display: flex;\n  row-gap: var(--lux-radio-group-row-gap);\n  flex-direction: column;\n}\n\n.lux-radio-group__options {\n  display: flex;\n  row-gap: var(--lux-radio-group-row-gap);\n  flex-direction: column;\n}\n\n.lux-radio-group__fieldset {\n  border: 0;\n}\n.utrecht-link--html-span:active,\n.utrecht-link--html-a:any-link:active,\n.utrecht-link--active,\n.utrecht-link--visited {\n  --_utrecht-link-state-text-decoration-color: var(--utrecht-link-active-color);\n}\n\n.lux-link {\n  display: inline flex;\n  align-items: baseline;\n  gap: var(--lux-link-column-gap);\n}\n\n.lux-link-icon--start {\n  order: 0;\n}\n\n.lux-link-icon--end {\n  order: 1;\n}\n.utrecht-link.utrecht-link-list__link {\n  &:active,\n  &:hover {\n    --utrecht-link-hover-text-decoration: var(--lux-link-list-link-hover-text-decoration);\n  }\n\n  &:visited {\n    color: var(--utrecht-link-visited-color);\n  }\n}\n.lux-section {\n  display: flex;\n  row-gap: var(--lux-section-row-gap);\n  flex-direction: column;\n  justify-content: start;\n  border-radius: var(--lux-section-border-radius);\n  background-color: var(--lux-section-background-color);\n  padding-inline-start: var(--lux-section-padding-inline-start);\n  padding-inline-end: var(--lux-section-padding-inline-end);\n  padding-block-start: var(--lux-section-padding-block-start);\n  padding-block-end: var(--lux-section-padding-block-end);\n}'));
       document.head.appendChild(elementStyle);
     }
   } catch (e) {

package/dist/index.umd.js CHANGED Viewed

@@ -10435,7 +10435,7 @@
   try {
     if (typeof document != "undefined") {
       var elementStyle = document.createElement("style");
-      elementStyle.appendChild(document.createTextNode('.lux-alert {\n  --utrecht-heading-1-color: var(--utrecht-alert-color);\n  --utrecht-heading-1-font-size: var(--lux-alert-heading-font-size);\n  --utrecht-heading-1-font-family: var(--lux-alert-heading-font-family);\n  --utrecht-heading-1-font-weight: var(--lux-alert-heading-font-weight);\n  --utrecht-heading-1-line-height: var(--lux-alert-heading-line-height);\n  --utrecht-heading-2-color: var(--utrecht-alert-color);\n  --utrecht-heading-2-font-size: var(--lux-alert-heading-font-size);\n  --utrecht-heading-2-font-family: var(--lux-alert-heading-font-family);\n  --utrecht-heading-2-font-weight: var(--lux-alert-heading-font-weight);\n  --utrecht-heading-2-line-height: var(--lux-alert-heading-line-height);\n  --utrecht-heading-3-color: var(--utrecht-alert-color);\n  --utrecht-heading-3-font-size: var(--lux-alert-heading-font-size);\n  --utrecht-heading-3-font-family: var(--lux-alert-heading-font-family);\n  --utrecht-heading-3-font-weight: var(--lux-alert-heading-font-weight);\n  --utrecht-heading-3-line-height: var(--lux-alert-heading-line-height);\n  --utrecht-heading-4-color: var(--utrecht-alert-color);\n  --utrecht-heading-4-font-size: var(--lux-alert-heading-font-size);\n  --utrecht-heading-4-font-family: var(--lux-alert-heading-font-family);\n  --utrecht-heading-4-font-weight: var(--lux-alert-heading-font-weight);\n  --utrecht-heading-4-line-height: var(--lux-alert-heading-line-height);\n  --utrecht-heading-5-color: var(--utrecht-alert-color);\n  --utrecht-heading-5-font-size: var(--lux-alert-heading-font-size);\n  --utrecht-heading-5-font-family: var(--lux-alert-heading-font-family);\n  --utrecht-heading-5-font-weight: var(--lux-alert-heading-font-weight);\n  --utrecht-heading-5-line-height: var(--lux-alert-heading-line-height);\n  --utrecht-heading-6-color: var(--utrecht-alert-color);\n  --utrecht-heading-6-font-size: var(--lux-alert-heading-font-size);\n  --utrecht-heading-6-font-family: var(--lux-alert-heading-font-family);\n  --utrecht-heading-6-font-weight: var(--lux-alert-heading-font-weight);\n  --utrecht-heading-6-line-height: var(--lux-alert-heading-line-height);\n  --utrecht-paragraph-color: var(--utrecht-alert-color);\n\n  .utrecht-alert__icon {\n    block-size: var(--lux-alert-heading-line-height);\n  }\n}\n.lux-button {\n  display: inline-flex;\n}\n\n.lux-button--small {\n  padding-block-start: var(--lux-button-small-padding-block-start);\n  padding-block-end: var(--lux-button-small-padding-block-end);\n  min-inline-size: var(--lux-button-small-min-inline-size);\n  min-block-size: var(--lux-button-small-min-block-size);\n}\n\n.lux-button-icon--start {\n  order: 0;\n}\n\n.lux-button-icon--end {\n  order: 1;\n}\n:root {\n  /* Just for an example */\n  --lux-checkbox-target-hover-background-color: hsla(0 0% 76% / 19%);\n  --lux-checkbox-target-border-radius: 50%;\n}\n\n.lux-checkbox:checked:focus {\n  border-color: var(--lux-checkbox-checked-focus-border-color);\n  background-color: var(--lux-checkbox-checked-focus-background-color);\n  color: var(--lux-checkbox-checked-focus-color);\n}\n\n.lux-checkbox:checked:hover {\n  border-color: var(--lux-checkbox-checked-hover-border-color);\n  background-color: var(--lux-checkbox-checked-hover-background-color);\n  color: var(--lux-checkbox-checked-hover-color);\n}\n\n.lux-checkbox:checked:active {\n  border-color: var(--lux-checkbox-checked-active-border-color);\n  background-color: var(--lux-checkbox-checked-active-background-color);\n  color: var(--lux-checkbox-checked-active-color);\n}\n\n.lux-checkbox:checked:disabled {\n  border-color: var(--lux-checkbox-checked-disabled-border-color);\n  background-color: var(--lux-checkbox-checked-disabled-background-color);\n  color: var(--lux-checkbox-checked-disabled-color);\n}\n\n.lux-checkbox--disabled {\n  cursor: not-allowed;\n}\n\n.lux-checkbox--with-target {\n  display: inline-grid;\n  grid-template-areas: "input";\n  place-content: center center;\n}\n\n.lux-checkbox--with-target::before,\n.lux-checkbox--with-target::after {\n  grid-area: input;\n  min-inline-size: 44px;\n  min-block-size: 44px;\n  content: "";\n}\n\n.lux-checkbox--with-target:hover::after {\n  border-radius: var(--lux-checkbox-target-border-radius);\n  background-color: var(--lux-checkbox-target-hover-background-color);\n}\n/* stylelint-disable-next-line scss/load-no-partial-leading-underscore */\n/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n/* stylelint-disable-next-line block-no-empty */\n:root {\n  --lux-form-field-checkbox-inner-column-gap: var(--lux-space-100);\n  --lux-form-field-checkbox-inner-padding-inline-start: var(--lux-space-200, 0.5rem);\n  --lux-form-field-checkbox-inner-padding-inline-end: var(--lux-space-200, 0.5rem);\n  --lux-form-field-checkbox-inner-padding-block-start: var(--lux-space-200, 0.5rem);\n  --lux-form-field-checkbox-inner-padding-block-end: var(--lux-space-200, 0.5rem);\n  --lux-form-field-checkbox-inner-border-radius: var(--lux-border-radius-default);\n  --lux-form-field-checkbox-inner-border-width: var(--lux-border-width-default, 1px);\n  --lux-form-field-checkbox-inner-border-style: solid;\n  --lux-form-field-checkbox-inner-color: var(--lux-color-foreground-default);\n  --lux-form-field-checkbox-inner-border-color: var(--lux-color-brand-default);\n  --lux-form-field-checkbox-inner-background-color: var(--lux-color-none);\n  --lux-form-field-checkbox-invalid-inner-border-color: var(--lux-color-feedback-error-default);\n  --lux-form-field-checkbox-invalid-inner-background-color: var(--lux-color-none);\n  --lux-form-field-checkbox-invalid-inner-row-gap: var(--lux-space-100);\n  --lux-form-field-checkbox-hover-inner-color: var(--lux-color-foreground-default);\n  --lux-form-field-checkbox-hover-inner-border-color: var(--lux-color-brand-default);\n  --lux-form-field-checkbox-hover-inner-background-color: var(--lux-color-brand-subdued);\n  --lux-form-field-checkbox-focus-visible-inner-color: var(--lux-color-foreground-default);\n  --lux-form-field-checkbox-focus-visible-inner-border-color: var(--lux-color-brand-default);\n  --lux-form-field-checkbox-focus-visible-inner-background-color: var(--lux-color-none);\n  --lux-form-field-checkbox-disabled-inner-color: var(--lux-color-foreground-default);\n  --lux-form-field-checkbox-disabled-inner-border-color: var(--lux-color-border-subdued);\n  --lux-form-field-checkbox-disabled-inner-background-color: var(--lux-color-none);\n}\n\n.lux-form-field.lux-form-field-checkbox {\n  /* prettier-ignore */\n  --_lux-checkbox-size: calc(var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end) + var(--lux-form-field-checkbox-inner-padding-inline-start));\n  --_lux-column-gap: var(--lux-form-field-checkbox-inner-column-gap, var(--utrecht-checkbox-margin-inline-end, 12px));\n  position: relative;\n  grid-template-columns: var(--_lux-checkbox-size) 100fr;\n  grid-template-areas: "input label" ". description" "error-message error-message";\n  gap: 0 var(--_lux-column-gap);\n}\n.lux-form-field.lux-form-field-checkbox::before {\n  grid-row-start: label;\n  grid-row-end: description;\n  grid-column-start: input;\n  grid-column-end: description;\n  border: var(--lux-form-field-checkbox-inner-border-width) var(--lux-form-field-checkbox-inner-border-style) var(--lux-form-field-checkbox-inner-border-color);\n  border-radius: var(--lux-form-field-checkbox-inner-border-radius);\n  pointer-events: none;\n  content: "";\n}\n.lux-form-field.lux-form-field-checkbox--disabled::before {\n  border-color: var(--lux-form-field-checkbox-disabled-inner-border-color);\n  background-color: var(--lux-form-field-checkbox-disabled-inner-background-color);\n  color: var(--lux-form-field-checkbox-disabled-inner-color);\n}\n.lux-form-field.lux-form-field-checkbox--invalid::before {\n  border-color: var(--lux-form-field-checkbox-invalid-inner-border-color);\n  background-color: var(--lux-form-field-checkbox-invalid-inner-background-color);\n  color: var(--lux-form-field-checkbox-invalid-inner-color);\n}\n.lux-form-field.lux-form-field-checkbox:has(:focus-visible)::before {\n  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);\n  /* - The browser default focus ring should apply when these CSS custom properties are not set.\n   * - Make the `box-shadow` value available, so components that have their own `box-shadow`\n   *   can combine it with the focus ring box shadow.\n   */\n  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);\n  box-shadow: var(--_utrecht-focus-ring-box-shadow);\n  outline-color: var(--utrecht-focus-outline-color, revert);\n  outline-offset: var(--utrecht-focus-outline-offset, revert);\n  outline-style: var(--utrecht-focus-outline-style, revert);\n  outline-width: var(--utrecht-focus-outline-width, revert);\n  z-index: 1;\n  z-index: auto;\n  border-color: var(--lux-form-field-checkbox-focus-visible-inner-border-color);\n  background-color: var(--lux-form-field-checkbox-focus-visible-inner-background-color);\n  color: var(--lux-form-field-checkbox-focus-visible-inner-color);\n}\n.lux-form-field.lux-form-field-checkbox .utrecht-checkbox:focus-visible {\n  outline: none;\n}\n.lux-form-field.lux-form-field-checkbox--with-target:not(.lux-form-field.lux-form-field-checkbox--disabled):has(.utrecht-form-field__input .utrecht-checkbox:hover)::before {\n  border-color: var(--lux-form-field-checkbox-hover-inner-border-color);\n  background-color: var(--lux-form-field-checkbox-hover-inner-background-color);\n  color: var(--lux-form-field-checkbox-hover-inner-color);\n}\n.lux-form-field.lux-form-field-checkbox--with-target .lux-form-field.lux-form-field-checkbox__label::before, .lux-form-field.lux-form-field-checkbox--with-target .lux-form-field.lux-form-field-checkbox__description label::before {\n  position: absolute;\n  inset-block-end: 0;\n  inset-block-start: 0;\n  inset-inline-end: 0;\n  inset-inline-start: calc(-1 * var(--_lux-checkbox-size) - var(--_lux-column-gap));\n  pointer-events: visible;\n  content: "";\n}\n.lux-form-field.lux-form-field-checkbox .utrecht-form-field__label,\n.lux-form-field.lux-form-field-checkbox .utrecht-form-field__description {\n  position: relative;\n}\n.lux-form-field.lux-form-field-checkbox .utrecht-form-field__label,\n.lux-form-field.lux-form-field-checkbox .utrecht-form-field__input {\n  padding-block-start: var(--lux-form-field-checkbox-inner-padding-block-start);\n}\n.lux-form-field.lux-form-field-checkbox .utrecht-form-field__label + .utrecht-form-field__input,\n.lux-form-field.lux-form-field-checkbox .utrecht-form-field__description {\n  padding-block-end: var(--lux-form-field-checkbox-inner-padding-block-end);\n}\n.lux-form-field.lux-form-field-checkbox .utrecht-form-field__input {\n  display: grid;\n  place-content: baseline center;\n  padding-inline-start: var(--lux-form-field-checkbox-inner-padding-inline-start);\n}\n.lux-form-field.lux-form-field-checkbox .utrecht-form-field__error-message {\n  padding-block-start: var(--lux-form-field-checkbox-invalid-inner-row-gap);\n}/* TODO: Replace tokens or fix in Utrecht code */\n.lux-select {\n  box-shadow: inset 0 0 0 var(--utrecht-select-border-width) var(--utrecht-select-border-color);\n  border: 0;\n  line-height: var(--utrecht-select-line-height);\n\n  &.utrecht-select--invalid {\n    box-shadow: inset 0 0 0 var(--utrecht-select-invalid-border-width) var(--utrecht-select-invalid-border-color);\n  }\n\n  &:not([multiple]) {\n    background-position: center right var(--utrecht-select-padding-inline-end);\n    background-size: var(--lux-select-icon-size);\n  }\n\n  &:focus {\n    box-shadow: inset 0 0 0 var(--lux-select-focus-border-width) var(--utrecht-select-focus-border-color);\n  }\n\n  &:focus-visible {\n    outline-offset: var(--utrecht-focus-outline-offset, revert);\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 var(--lux-select-hover-border-width) var(--utrecht-select-hover-border-color);\n    background-color: var(--utrecht-select-hover-background-color);\n    color: var(--utrecht-select-hover-color);\n  }\n}\n.utrecht-textarea--read-only,\n.utrecht-textarea--html-textarea:read-only {\n  border-color: var(\n    --utrecht-textarea-read-only-border-color,\n    var(\n      --utrecht-form-control-read-only-border-color,\n      var(--utrecht-textarea-border, var(--utrecht-form-control-border-color))\n    )\n  );\n  background-color: var(\n    --utrecht-textarea-read-only-background-color,\n    var(\n      --utrecht-form-control-read-only-background-color,\n      var(--utrecht-textarea-border, var(--utrecht-form-control-background-color))\n    )\n  );\n}\n/* stylelint-disable scss/operator-no-newline-after */\n.lux-radio-button {\n  margin-block-start: calc(\n    (\n        var(--utrecht-document-line-height, inherit) - var(--utrecht-radio-button-size, 1em) -\n          var(--utrecht-radio-button-border-width)\n      ) / 2\n  );\n  background-image: radial-gradient(\n    circle,\n    var(--_utrecht-radio-button-color, transparent) calc((var(--_utrecht-radio-button-icon-size, 50%) / 2) - 5%),\n    var(--_utrecht-radio-button-background-color, currentColor) calc((var(--_utrecht-radio-button-icon-size, 50%) / 2))\n  );\n  min-inline-size: var(--utrecht-radio-button-size, 1em);\n  min-block-size: var(--utrecht-radio-button-size, 1em);\n}\n.lux-radio-button__container {\n  display: inline flex;\n  align-items: start;\n}\n.lux-radio-group {\n  display: flex;\n  row-gap: var(--lux-radio-group-row-gap);\n  flex-direction: column;\n}\n\n.lux-radio-group__options {\n  display: flex;\n  row-gap: var(--lux-radio-group-row-gap);\n  flex-direction: column;\n}\n\n.lux-radio-group__fieldset {\n  border: 0;\n}\n.utrecht-link--html-span:active,\n.utrecht-link--html-a:any-link:active,\n.utrecht-link--active,\n.utrecht-link--visited {\n  --_utrecht-link-state-text-decoration-color: var(--utrecht-link-active-color);\n}\n\n.lux-link {\n  display: inline flex;\n  align-items: baseline;\n  gap: var(--lux-link-column-gap);\n}\n\n.lux-link-icon--start {\n  order: 0;\n}\n\n.lux-link-icon--end {\n  order: 1;\n}\n.utrecht-link.utrecht-link-list__link {\n  &:active,\n  &:hover {\n    --utrecht-link-hover-text-decoration: var(--lux-link-list-link-hover-text-decoration);\n  }\n\n  &:visited {\n    color: var(--utrecht-link-visited-color);\n  }\n}\n.lux-section {\n  display: flex;\n  row-gap: var(--lux-section-row-gap);\n  flex-direction: column;\n  justify-content: start;\n  border-radius: var(--lux-section-border-radius);\n  background-color: var(--lux-section-background-color);\n  padding-inline-start: var(--lux-section-padding-inline-start);\n  padding-inline-end: var(--lux-section-padding-inline-end);\n  padding-block-start: var(--lux-section-padding-block-start);\n  padding-block-end: var(--lux-section-padding-block-end);\n}'));
+      elementStyle.appendChild(document.createTextNode('.lux-alert {\n  --utrecht-heading-1-color: var(--utrecht-alert-color);\n  --utrecht-heading-1-font-size: var(--lux-alert-heading-font-size);\n  --utrecht-heading-1-font-family: var(--lux-alert-heading-font-family);\n  --utrecht-heading-1-font-weight: var(--lux-alert-heading-font-weight);\n  --utrecht-heading-1-line-height: var(--lux-alert-heading-line-height);\n  --utrecht-heading-2-color: var(--utrecht-alert-color);\n  --utrecht-heading-2-font-size: var(--lux-alert-heading-font-size);\n  --utrecht-heading-2-font-family: var(--lux-alert-heading-font-family);\n  --utrecht-heading-2-font-weight: var(--lux-alert-heading-font-weight);\n  --utrecht-heading-2-line-height: var(--lux-alert-heading-line-height);\n  --utrecht-heading-3-color: var(--utrecht-alert-color);\n  --utrecht-heading-3-font-size: var(--lux-alert-heading-font-size);\n  --utrecht-heading-3-font-family: var(--lux-alert-heading-font-family);\n  --utrecht-heading-3-font-weight: var(--lux-alert-heading-font-weight);\n  --utrecht-heading-3-line-height: var(--lux-alert-heading-line-height);\n  --utrecht-heading-4-color: var(--utrecht-alert-color);\n  --utrecht-heading-4-font-size: var(--lux-alert-heading-font-size);\n  --utrecht-heading-4-font-family: var(--lux-alert-heading-font-family);\n  --utrecht-heading-4-font-weight: var(--lux-alert-heading-font-weight);\n  --utrecht-heading-4-line-height: var(--lux-alert-heading-line-height);\n  --utrecht-heading-5-color: var(--utrecht-alert-color);\n  --utrecht-heading-5-font-size: var(--lux-alert-heading-font-size);\n  --utrecht-heading-5-font-family: var(--lux-alert-heading-font-family);\n  --utrecht-heading-5-font-weight: var(--lux-alert-heading-font-weight);\n  --utrecht-heading-5-line-height: var(--lux-alert-heading-line-height);\n  --utrecht-heading-6-color: var(--utrecht-alert-color);\n  --utrecht-heading-6-font-size: var(--lux-alert-heading-font-size);\n  --utrecht-heading-6-font-family: var(--lux-alert-heading-font-family);\n  --utrecht-heading-6-font-weight: var(--lux-alert-heading-font-weight);\n  --utrecht-heading-6-line-height: var(--lux-alert-heading-line-height);\n  --utrecht-paragraph-color: var(--utrecht-alert-color);\n\n  .utrecht-alert__icon {\n    block-size: var(--lux-alert-heading-line-height);\n  }\n}\n.lux-button {\n  display: inline-flex;\n}\n\n.lux-button--small {\n  padding-block-start: var(--lux-button-small-padding-block-start);\n  padding-block-end: var(--lux-button-small-padding-block-end);\n  min-inline-size: var(--lux-button-small-min-inline-size);\n  min-block-size: var(--lux-button-small-min-block-size);\n}\n\n.lux-button-icon--start {\n  order: 0;\n}\n\n.lux-button-icon--end {\n  order: 1;\n}\n:root {\n  /* Just for an example */\n  --lux-checkbox-target-hover-background-color: hsla(0 0% 76% / 19%);\n  --lux-checkbox-target-border-radius: 50%;\n}\n\n.lux-checkbox:checked:focus {\n  border-color: var(--lux-checkbox-checked-focus-border-color);\n  background-color: var(--lux-checkbox-checked-focus-background-color);\n  color: var(--lux-checkbox-checked-focus-color);\n}\n\n.lux-checkbox:checked:hover {\n  border-color: var(--lux-checkbox-checked-hover-border-color);\n  background-color: var(--lux-checkbox-checked-hover-background-color);\n  color: var(--lux-checkbox-checked-hover-color);\n}\n\n.lux-checkbox:checked:active {\n  border-color: var(--lux-checkbox-checked-active-border-color);\n  background-color: var(--lux-checkbox-checked-active-background-color);\n  color: var(--lux-checkbox-checked-active-color);\n}\n\n.lux-checkbox:checked:disabled {\n  border-color: var(--lux-checkbox-checked-disabled-border-color);\n  background-color: var(--lux-checkbox-checked-disabled-background-color);\n  color: var(--lux-checkbox-checked-disabled-color);\n}\n\n.lux-checkbox--disabled {\n  cursor: not-allowed;\n}\n\n.lux-checkbox--with-target {\n  display: inline-grid;\n  grid-template-areas: "input";\n  place-content: center center;\n}\n\n.lux-checkbox--with-target::before,\n.lux-checkbox--with-target::after {\n  grid-area: input;\n  min-inline-size: 44px;\n  min-block-size: 44px;\n  content: "";\n}\n\n.lux-checkbox--with-target:hover::after {\n  border-radius: var(--lux-checkbox-target-border-radius);\n  background-color: var(--lux-checkbox-target-hover-background-color);\n}\n/* stylelint-disable-next-line scss/load-no-partial-leading-underscore */\n/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n/* stylelint-disable-next-line block-no-empty */\n:root {\n  --lux-form-field-checkbox-inner-column-gap: var(--lux-space-100);\n  --lux-form-field-checkbox-inner-padding-inline-start: var(--lux-space-200, 0.5rem);\n  --lux-form-field-checkbox-inner-padding-inline-end: var(--lux-space-200, 0.5rem);\n  --lux-form-field-checkbox-inner-padding-block-start: var(--lux-space-200, 0.5rem);\n  --lux-form-field-checkbox-inner-padding-block-end: var(--lux-space-200, 0.5rem);\n  --lux-form-field-checkbox-inner-border-radius: var(--lux-border-radius-default);\n  --lux-form-field-checkbox-inner-border-width: var(--lux-border-width-default, 1px);\n  --lux-form-field-checkbox-inner-border-style: solid;\n  --lux-form-field-checkbox-inner-color: var(--lux-color-foreground-default);\n  --lux-form-field-checkbox-inner-border-color: var(--lux-color-brand-default);\n  --lux-form-field-checkbox-inner-background-color: var(--lux-color-none);\n  --lux-form-field-checkbox-invalid-inner-border-color: var(--lux-color-feedback-error-default);\n  --lux-form-field-checkbox-invalid-inner-background-color: var(--lux-color-none);\n  --lux-form-field-checkbox-invalid-inner-row-gap: var(--lux-space-100);\n  --lux-form-field-checkbox-hover-inner-color: var(--lux-color-foreground-default);\n  --lux-form-field-checkbox-hover-inner-border-color: var(--lux-color-brand-default);\n  --lux-form-field-checkbox-hover-inner-background-color: var(--lux-color-brand-subdued);\n  --lux-form-field-checkbox-focus-visible-inner-color: var(--lux-color-foreground-default);\n  --lux-form-field-checkbox-focus-visible-inner-border-color: var(--lux-color-brand-default);\n  --lux-form-field-checkbox-focus-visible-inner-background-color: var(--lux-color-none);\n  --lux-form-field-checkbox-disabled-inner-color: var(--lux-color-foreground-default);\n  --lux-form-field-checkbox-disabled-inner-border-color: var(--lux-color-border-subdued);\n  --lux-form-field-checkbox-disabled-inner-background-color: var(--lux-color-none);\n}\n\n.lux-form-field.lux-form-field-checkbox {\n  /* prettier-ignore */\n  --_lux-checkbox-size: calc(var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end) + var(--lux-form-field-checkbox-inner-padding-inline-start));\n  --_lux-column-gap: var(--lux-form-field-checkbox-inner-column-gap, var(--utrecht-checkbox-margin-inline-end, 12px));\n  position: relative;\n  grid-template-columns: var(--_lux-checkbox-size) 100fr;\n  grid-template-areas: "input label" ". description" "error-message error-message";\n  gap: 0 var(--_lux-column-gap);\n}\n.lux-form-field.lux-form-field-checkbox::before {\n  grid-row-start: label;\n  grid-row-end: description;\n  grid-column-start: input;\n  grid-column-end: description;\n  border: var(--lux-form-field-checkbox-inner-border-width) var(--lux-form-field-checkbox-inner-border-style) var(--lux-form-field-checkbox-inner-border-color);\n  border-radius: var(--lux-form-field-checkbox-inner-border-radius);\n  pointer-events: none;\n  content: "";\n}\n.lux-form-field.lux-form-field-checkbox--disabled::before {\n  border-color: var(--lux-form-field-checkbox-disabled-inner-border-color);\n  background-color: var(--lux-form-field-checkbox-disabled-inner-background-color);\n  color: var(--lux-form-field-checkbox-disabled-inner-color);\n}\n.lux-form-field.lux-form-field-checkbox--invalid::before {\n  border-color: var(--lux-form-field-checkbox-invalid-inner-border-color);\n  background-color: var(--lux-form-field-checkbox-invalid-inner-background-color);\n  color: var(--lux-form-field-checkbox-invalid-inner-color);\n}\n.lux-form-field.lux-form-field-checkbox:has(:focus-visible)::before {\n  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);\n  /* - The browser default focus ring should apply when these CSS custom properties are not set.\n   * - Make the `box-shadow` value available, so components that have their own `box-shadow`\n   *   can combine it with the focus ring box shadow.\n   */\n  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);\n  box-shadow: var(--_utrecht-focus-ring-box-shadow);\n  outline-color: var(--utrecht-focus-outline-color, revert);\n  outline-offset: var(--utrecht-focus-outline-offset, revert);\n  outline-style: var(--utrecht-focus-outline-style, revert);\n  outline-width: var(--utrecht-focus-outline-width, revert);\n  z-index: 1;\n  z-index: auto;\n  border-color: var(--lux-form-field-checkbox-focus-visible-inner-border-color);\n  background-color: var(--lux-form-field-checkbox-focus-visible-inner-background-color);\n  color: var(--lux-form-field-checkbox-focus-visible-inner-color);\n}\n.lux-form-field.lux-form-field-checkbox .utrecht-checkbox:focus-visible {\n  outline: none;\n}\n.lux-form-field.lux-form-field-checkbox--with-target:not(.lux-form-field.lux-form-field-checkbox--disabled):has(.utrecht-form-field__input .utrecht-checkbox:hover)::before {\n  border-color: var(--lux-form-field-checkbox-hover-inner-border-color);\n  background-color: var(--lux-form-field-checkbox-hover-inner-background-color);\n  color: var(--lux-form-field-checkbox-hover-inner-color);\n}\n.lux-form-field.lux-form-field-checkbox--with-target .lux-form-field.lux-form-field-checkbox__label::before, .lux-form-field.lux-form-field-checkbox--with-target .lux-form-field.lux-form-field-checkbox__description label::before {\n  position: absolute;\n  inset-block-end: 0;\n  inset-block-start: 0;\n  inset-inline-end: 0;\n  inset-inline-start: calc(-1 * var(--_lux-checkbox-size) - var(--_lux-column-gap));\n  pointer-events: visible;\n  content: "";\n}\n.lux-form-field.lux-form-field-checkbox .utrecht-form-field__label,\n.lux-form-field.lux-form-field-checkbox .utrecht-form-field__description {\n  position: relative;\n}\n.lux-form-field.lux-form-field-checkbox .utrecht-form-field__label,\n.lux-form-field.lux-form-field-checkbox .utrecht-form-field__input {\n  padding-block-start: var(--lux-form-field-checkbox-inner-padding-block-start);\n}\n.lux-form-field.lux-form-field-checkbox .utrecht-form-field__label + .utrecht-form-field__input,\n.lux-form-field.lux-form-field-checkbox .utrecht-form-field__description {\n  padding-block-end: var(--lux-form-field-checkbox-inner-padding-block-end);\n}\n.lux-form-field.lux-form-field-checkbox .utrecht-form-field__input {\n  display: grid;\n  place-content: baseline center;\n  padding-inline-start: var(--lux-form-field-checkbox-inner-padding-inline-start);\n}\n.lux-form-field.lux-form-field-checkbox .utrecht-form-field__error-message {\n  padding-block-start: var(--lux-form-field-checkbox-invalid-inner-row-gap);\n}/* TODO: Replace tokens or fix in Utrecht code */\n.lux-select {\n  box-shadow: inset 0 0 0 var(--utrecht-select-border-width) var(--utrecht-select-border-color);\n  border: 0;\n  line-height: var(--utrecht-select-line-height);\n\n  &.utrecht-select--invalid {\n    box-shadow: inset 0 0 0 var(--utrecht-select-invalid-border-width) var(--utrecht-select-invalid-border-color);\n  }\n\n  &:not([multiple]) {\n    background-position: center right var(--utrecht-select-padding-inline-end);\n    background-size: var(--lux-select-icon-size);\n  }\n\n  &:focus {\n    box-shadow: inset 0 0 0 var(--lux-select-focus-border-width) var(--utrecht-select-focus-border-color);\n  }\n\n  &:focus-visible {\n    outline-offset: var(--utrecht-focus-outline-offset, revert);\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 var(--lux-select-hover-border-width) var(--utrecht-select-hover-border-color);\n    background-color: var(--utrecht-select-hover-background-color);\n    color: var(--utrecht-select-hover-color);\n  }\n}\n.utrecht-textarea--read-only,\n.utrecht-textarea--html-textarea:read-only {\n  border-color: var(\n    --utrecht-textarea-read-only-border-color,\n    var(\n      --utrecht-form-control-read-only-border-color,\n      var(--utrecht-textarea-border, var(--utrecht-form-control-border-color))\n    )\n  );\n  background-color: var(\n    --utrecht-textarea-read-only-background-color,\n    var(\n      --utrecht-form-control-read-only-background-color,\n      var(--utrecht-textarea-border, var(--utrecht-form-control-background-color))\n    )\n  );\n}\n/* stylelint-disable scss/operator-no-newline-after */\n.lux-radio-button {\n  margin-block-start: calc(\n    (\n        var(--utrecht-document-line-height, inherit) - var(--utrecht-radio-button-size, 1em) -\n          var(--utrecht-radio-button-border-width)\n      ) /\n      2\n  );\n  background-image: radial-gradient(\n    circle,\n    var(--_utrecht-radio-button-color, transparent) calc((var(--_utrecht-radio-button-icon-size, 50%) / 2) - 5%),\n    var(--_utrecht-radio-button-background-color, currentColor) calc((var(--_utrecht-radio-button-icon-size, 50%) / 2))\n  );\n  min-inline-size: var(--utrecht-radio-button-size, 1em);\n  min-block-size: var(--utrecht-radio-button-size, 1em);\n}\n.lux-radio-button__container {\n  display: inline flex;\n  align-items: start;\n}\n.lux-radio-group {\n  display: flex;\n  row-gap: var(--lux-radio-group-row-gap);\n  flex-direction: column;\n}\n\n.lux-radio-group__options {\n  display: flex;\n  row-gap: var(--lux-radio-group-row-gap);\n  flex-direction: column;\n}\n\n.lux-radio-group__fieldset {\n  border: 0;\n}\n.utrecht-link--html-span:active,\n.utrecht-link--html-a:any-link:active,\n.utrecht-link--active,\n.utrecht-link--visited {\n  --_utrecht-link-state-text-decoration-color: var(--utrecht-link-active-color);\n}\n\n.lux-link {\n  display: inline flex;\n  align-items: baseline;\n  gap: var(--lux-link-column-gap);\n}\n\n.lux-link-icon--start {\n  order: 0;\n}\n\n.lux-link-icon--end {\n  order: 1;\n}\n.utrecht-link.utrecht-link-list__link {\n  &:active,\n  &:hover {\n    --utrecht-link-hover-text-decoration: var(--lux-link-list-link-hover-text-decoration);\n  }\n\n  &:visited {\n    color: var(--utrecht-link-visited-color);\n  }\n}\n.lux-section {\n  display: flex;\n  row-gap: var(--lux-section-row-gap);\n  flex-direction: column;\n  justify-content: start;\n  border-radius: var(--lux-section-border-radius);\n  background-color: var(--lux-section-background-color);\n  padding-inline-start: var(--lux-section-padding-inline-start);\n  padding-inline-end: var(--lux-section-padding-inline-end);\n  padding-block-start: var(--lux-section-padding-block-start);\n  padding-block-end: var(--lux-section-padding-block-end);\n}'));
       document.head.appendChild(elementStyle);
     }
   } catch (e) {

package/package.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.2",
+  "version": "1.2.3",
   "author": "Community for NL Design System",
   "description": "React component library for LUX, the Design System for Logius, based on the NL Design System architecture",
   "license": "EUPL-1.2",
@@ -57,7 +57,7 @@
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "mkdirp": "3.0.1",
-    "next": "14.2.5",
+    "next": "14.2.33",
     "npm-run-all": "4.1.5",
     "react": "18.3.1",
     "react-dom": "18.3.1",
@@ -81,7 +81,9 @@
     "build": "npm-run-all build:**",
     "build:components": "vite build",
     "clean": "rimraf dist/ pages/",
-    "lint": "tsc --project ./tsconfig.json --noEmit && tsc --noEmit --project ./tsconfig.test.json",
+    "lint": "npm-run-all lint:*",
+    "lint:src": "tsc --project ./tsconfig.json --noEmit",
+    "lint:test": "tsc --project ./tsconfig.test.json --noEmit",
     "test": "mkdirp pages && cross-env NODE_OPTIONS=--experimental-vm-modules jest --verbose",
     "watch:components": "vite build --watch",
     "watch:test": "cross-env NODE_OPTIONS=--experimental-vm-modules jest --verbose --watch"