@lux-design-system/components-react 1.1.0 → 1.1.1

package/dist/index.mjs

@@ -5662,7 +5662,7 @@ const LuxFormFieldCheckbox = ({
           ...checkBoxAttrs
         }
       ),
-      className: clsx("lux-form-field-checkbox", {
+      className: clsx("lux-form-field lux-form-field-checkbox", {
         "lux-form-field-checkbox--invalid": invalid,
         "lux-form-field-checkbox--disabled": disabled,
         "lux-form-field-checkbox--with-target": withTarget
@@ -6211,7 +6211,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-line-height: var(--lux-alert-heading-font-size);\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-line-height: var(--lux-alert-heading-font-size);\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-line-height: var(--lux-alert-heading-font-size);\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-line-height: var(--lux-alert-heading-font-size);\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-line-height: var(--lux-alert-heading-font-size);\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-line-height: var(--lux-alert-heading-font-size);\n  --utrecht-paragraph-color: var(--utrecht-alert-color);\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::after {\n  z-index: -1;\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-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-checkbox::before {\n  position: relative;\n  grid-row-start: label;\n  grid-row-end: description;\n  grid-column-start: input;\n  grid-column-end: description;\n  z-index: -1;\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-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-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-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: -1;\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-checkbox .utrecht-checkbox:focus-visible {\n  outline: none;\n}\n.lux-form-field-checkbox--with-target:not(.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-checkbox--with-target .lux-form-field-checkbox__label::before, .lux-form-field-checkbox--with-target .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-checkbox .utrecht-form-field__label,\n.lux-form-field-checkbox .utrecht-form-field__description {\n  position: relative;\n}\n.lux-form-field-checkbox .utrecht-form-field__label,\n.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-checkbox .utrecht-form-field__label + .utrecht-form-field__input,\n.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-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-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.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.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-line-height: var(--lux-alert-heading-font-size);\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-line-height: var(--lux-alert-heading-font-size);\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-line-height: var(--lux-alert-heading-font-size);\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-line-height: var(--lux-alert-heading-font-size);\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-line-height: var(--lux-alert-heading-font-size);\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-line-height: var(--lux-alert-heading-font-size);\n  --utrecht-paragraph-color: var(--utrecht-alert-color);\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::after {\n  z-index: -1;\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  position: relative;\n  grid-row-start: label;\n  grid-row-end: description;\n  grid-column-start: input;\n  grid-column-end: description;\n  z-index: -1;\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: -1;\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.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.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

@@ -5665,7 +5665,7 @@
             ...checkBoxAttrs
           }
         ),
-        className: clsx("lux-form-field-checkbox", {
+        className: clsx("lux-form-field lux-form-field-checkbox", {
           "lux-form-field-checkbox--invalid": invalid,
           "lux-form-field-checkbox--disabled": disabled,
           "lux-form-field-checkbox--with-target": withTarget
@@ -6214,7 +6214,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-line-height: var(--lux-alert-heading-font-size);\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-line-height: var(--lux-alert-heading-font-size);\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-line-height: var(--lux-alert-heading-font-size);\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-line-height: var(--lux-alert-heading-font-size);\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-line-height: var(--lux-alert-heading-font-size);\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-line-height: var(--lux-alert-heading-font-size);\n  --utrecht-paragraph-color: var(--utrecht-alert-color);\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::after {\n  z-index: -1;\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-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-checkbox::before {\n  position: relative;\n  grid-row-start: label;\n  grid-row-end: description;\n  grid-column-start: input;\n  grid-column-end: description;\n  z-index: -1;\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-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-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-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: -1;\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-checkbox .utrecht-checkbox:focus-visible {\n  outline: none;\n}\n.lux-form-field-checkbox--with-target:not(.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-checkbox--with-target .lux-form-field-checkbox__label::before, .lux-form-field-checkbox--with-target .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-checkbox .utrecht-form-field__label,\n.lux-form-field-checkbox .utrecht-form-field__description {\n  position: relative;\n}\n.lux-form-field-checkbox .utrecht-form-field__label,\n.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-checkbox .utrecht-form-field__label + .utrecht-form-field__input,\n.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-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-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.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.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-line-height: var(--lux-alert-heading-font-size);\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-line-height: var(--lux-alert-heading-font-size);\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-line-height: var(--lux-alert-heading-font-size);\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-line-height: var(--lux-alert-heading-font-size);\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-line-height: var(--lux-alert-heading-font-size);\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-line-height: var(--lux-alert-heading-font-size);\n  --utrecht-paragraph-color: var(--utrecht-alert-color);\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::after {\n  z-index: -1;\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  position: relative;\n  grid-row-start: label;\n  grid-row-end: description;\n  grid-column-start: input;\n  grid-column-end: description;\n  z-index: -1;\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: -1;\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.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.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

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.0",
+  "version": "1.1.1",
   "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",
@@ -14,7 +14,7 @@
   },
   "repository": {
     "type": "git+ssh",
-    "url": "git@github.com:nl-design-system/lux-community.git",
+    "url": "git@github.com:nl-design-system/lux.git",
     "directory": "packages/components-react"
   },
   "main": "./dist/index.umd.js",
@@ -70,7 +70,7 @@
     "vite-plugin-css-injected-by-js": "3.5.2",
     "vite-plugin-dts": "4.2.3",
     "vite-plugin-runtime-config": "1.0.2",
-    "@lux-design-system/components-css": "1.0.0-alpha.0"
+    "@lux-design-system/components-css": "1.0.0"
   },
   "peerDependencies": {
     "react": "18",