@lux-design-system/components-react 1.2.0 → 1.2.1

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
  1. package/dist/index.mjs +30 -30
  2. package/dist/index.umd.js +30 -30
  3. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -9503,6 +9503,32 @@ var UnorderedListItem = /* @__PURE__ */ forwardRef(function(_ref, ref) {
9503
9503
  }));
9504
9504
  });
9505
9505
  UnorderedListItem.displayName = "UnorderedListItem";
9506
+ const LuxIconFallbackSVGTestId = "lux-icon-fallback-svg";
9507
+ const FallbackIcon = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(
9508
+ "svg",
9509
+ {
9510
+ xmlns: "http://www.w3.org/2000/svg",
9511
+ viewBox: "0 0 440 440",
9512
+ width: "1em",
9513
+ height: "1em",
9514
+ "data-icon-name": "zoek",
9515
+ "data-testid": LuxIconFallbackSVGTestId,
9516
+ ...props,
9517
+ children: /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { children: [
9518
+ /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M182.483 437.665L219.245 437.665L219.245 271.697C213.621 274.254 207.434 275.737 200.838 275.737C194.242 275.737 188.056 274.254 182.431 271.697L182.431 437.665L182.483 437.665Z" }),
9519
+ /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M182.483 231.306C182.483 241.43 190.766 249.662 200.889 249.662C211.013 249.662 219.296 241.43 219.296 231.255L219.296 193.674L245.372 193.674L245.372 231.255C245.372 241.379 253.604 249.662 263.779 249.662C273.954 249.662 282.186 241.43 282.186 231.255L282.186 193.674L308.262 193.674L308.262 231.255C308.262 255.797 288.321 275.738 263.779 275.738C257.234 275.738 250.997 274.255 245.372 271.699L245.372 437.666L315.88 437.666L315.88 428.769C315.88 375.901 308.824 375.646 345.229 337.298C383.883 296.548 405.562 239.538 398.762 177.466C388.689 85.6882 314.602 11.4476 222.875 1.27273C102.158 -12.1233 0.000107732 82.0068 8.70987e-05 200.014C7.78817e-05 252.729 20.452 300.536 53.7376 336.224C90.1931 375.236 84.1087 375.441 84.1087 428.821L84.1087 437.615L156.406 437.615L156.406 271.545C150.731 274.153 144.442 275.687 137.795 275.687C113.253 275.687 93.3121 255.746 93.3121 231.204L93.3121 193.623L119.388 193.623L119.388 231.204C119.388 241.327 127.62 249.61 137.795 249.61C147.97 249.61 156.202 241.379 156.202 231.204L156.202 193.623L182.483 193.623L182.483 231.204" })
9520
+ ] })
9521
+ }
9522
+ );
9523
+ const LuxIcon = ({ icon, children }) => {
9524
+ return /* @__PURE__ */ jsxRuntimeExports.jsxs(Icon, { children: [
9525
+ /* @__PURE__ */ jsxRuntimeExports.jsx("style", { children: `svg {
9526
+ fill: currentColor;
9527
+ }` }),
9528
+ icon ?? /* @__PURE__ */ jsxRuntimeExports.jsx(FallbackIcon, {}),
9529
+ children
9530
+ ] });
9531
+ };
9506
9532
  const InfoIcon = () => /* @__PURE__ */ jsxRuntimeExports.jsxs(
9507
9533
  "svg",
9508
9534
  {
@@ -9626,8 +9652,8 @@ const LuxAlert = (props) => {
9626
9652
  warning: WarningIcon,
9627
9653
  error: ErrorIcon
9628
9654
  };
9629
- const Icon2 = icons[type];
9630
- const icon = Icon2 ? /* @__PURE__ */ jsxRuntimeExports.jsx(Icon2, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
9655
+ const AlertIcon = icons[type];
9656
+ const icon = AlertIcon ? /* @__PURE__ */ jsxRuntimeExports.jsx(LuxIcon, { icon: /* @__PURE__ */ jsxRuntimeExports.jsx(AlertIcon, {}) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
9631
9657
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
9632
9658
  Alert,
9633
9659
  {
@@ -9710,32 +9736,6 @@ const LuxHeading5 = ({ ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx(LuxH
9710
9736
  const LuxHeading6 = ({ ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx(LuxHeading, { ...props, level: 6 });
9711
9737
  HeadingGroup.displayName = "LuxHeadingGroup";
9712
9738
  const LuxHeadingGroup = HeadingGroup;
9713
- const LuxIconFallbackSVGTestId = "lux-icon-fallback-svg";
9714
- const FallbackIcon = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(
9715
- "svg",
9716
- {
9717
- xmlns: "http://www.w3.org/2000/svg",
9718
- viewBox: "0 0 440 440",
9719
- width: "1em",
9720
- height: "1em",
9721
- "data-icon-name": "zoek",
9722
- "data-testid": LuxIconFallbackSVGTestId,
9723
- ...props,
9724
- children: /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { children: [
9725
- /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M182.483 437.665L219.245 437.665L219.245 271.697C213.621 274.254 207.434 275.737 200.838 275.737C194.242 275.737 188.056 274.254 182.431 271.697L182.431 437.665L182.483 437.665Z" }),
9726
- /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M182.483 231.306C182.483 241.43 190.766 249.662 200.889 249.662C211.013 249.662 219.296 241.43 219.296 231.255L219.296 193.674L245.372 193.674L245.372 231.255C245.372 241.379 253.604 249.662 263.779 249.662C273.954 249.662 282.186 241.43 282.186 231.255L282.186 193.674L308.262 193.674L308.262 231.255C308.262 255.797 288.321 275.738 263.779 275.738C257.234 275.738 250.997 274.255 245.372 271.699L245.372 437.666L315.88 437.666L315.88 428.769C315.88 375.901 308.824 375.646 345.229 337.298C383.883 296.548 405.562 239.538 398.762 177.466C388.689 85.6882 314.602 11.4476 222.875 1.27273C102.158 -12.1233 0.000107732 82.0068 8.70987e-05 200.014C7.78817e-05 252.729 20.452 300.536 53.7376 336.224C90.1931 375.236 84.1087 375.441 84.1087 428.821L84.1087 437.615L156.406 437.615L156.406 271.545C150.731 274.153 144.442 275.687 137.795 275.687C113.253 275.687 93.3121 255.746 93.3121 231.204L93.3121 193.623L119.388 193.623L119.388 231.204C119.388 241.327 127.62 249.61 137.795 249.61C147.97 249.61 156.202 241.379 156.202 231.204L156.202 193.623L182.483 193.623L182.483 231.204" })
9727
- ] })
9728
- }
9729
- );
9730
- const LuxIcon = ({ icon, children }) => {
9731
- return /* @__PURE__ */ jsxRuntimeExports.jsxs(Icon, { children: [
9732
- /* @__PURE__ */ jsxRuntimeExports.jsx("style", { children: `svg {
9733
- fill: currentColor;
9734
- }` }),
9735
- icon ?? /* @__PURE__ */ jsxRuntimeExports.jsx(FallbackIcon, {}),
9736
- children
9737
- ] });
9738
- };
9739
9739
  const LuxFormField = forwardRef(
9740
9740
  ({ children, className, ...restProps }, ref) => {
9741
9741
  return /* @__PURE__ */ jsxRuntimeExports.jsx(FormField, { ref, className, ...restProps, children });
@@ -10213,7 +10213,7 @@ const LuxRadioButton = forwardRef(
10213
10213
  id,
10214
10214
  name,
10215
10215
  value,
10216
- className,
10216
+ className: clsx("lux-radio-button", className),
10217
10217
  checked,
10218
10218
  ...restProps
10219
10219
  }
@@ -10432,7 +10432,7 @@ export {
10432
10432
  try {
10433
10433
  if (typeof document != "undefined") {
10434
10434
  var elementStyle = document.createElement("style");
10435
- 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.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}'));
10435
+ 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::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/* 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}'));
10436
10436
  document.head.appendChild(elementStyle);
10437
10437
  }
10438
10438
  } catch (e) {
package/dist/index.umd.js CHANGED
@@ -9506,6 +9506,32 @@
9506
9506
  }));
9507
9507
  });
9508
9508
  UnorderedListItem.displayName = "UnorderedListItem";
9509
+ const LuxIconFallbackSVGTestId = "lux-icon-fallback-svg";
9510
+ const FallbackIcon = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(
9511
+ "svg",
9512
+ {
9513
+ xmlns: "http://www.w3.org/2000/svg",
9514
+ viewBox: "0 0 440 440",
9515
+ width: "1em",
9516
+ height: "1em",
9517
+ "data-icon-name": "zoek",
9518
+ "data-testid": LuxIconFallbackSVGTestId,
9519
+ ...props,
9520
+ children: /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { children: [
9521
+ /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M182.483 437.665L219.245 437.665L219.245 271.697C213.621 274.254 207.434 275.737 200.838 275.737C194.242 275.737 188.056 274.254 182.431 271.697L182.431 437.665L182.483 437.665Z" }),
9522
+ /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M182.483 231.306C182.483 241.43 190.766 249.662 200.889 249.662C211.013 249.662 219.296 241.43 219.296 231.255L219.296 193.674L245.372 193.674L245.372 231.255C245.372 241.379 253.604 249.662 263.779 249.662C273.954 249.662 282.186 241.43 282.186 231.255L282.186 193.674L308.262 193.674L308.262 231.255C308.262 255.797 288.321 275.738 263.779 275.738C257.234 275.738 250.997 274.255 245.372 271.699L245.372 437.666L315.88 437.666L315.88 428.769C315.88 375.901 308.824 375.646 345.229 337.298C383.883 296.548 405.562 239.538 398.762 177.466C388.689 85.6882 314.602 11.4476 222.875 1.27273C102.158 -12.1233 0.000107732 82.0068 8.70987e-05 200.014C7.78817e-05 252.729 20.452 300.536 53.7376 336.224C90.1931 375.236 84.1087 375.441 84.1087 428.821L84.1087 437.615L156.406 437.615L156.406 271.545C150.731 274.153 144.442 275.687 137.795 275.687C113.253 275.687 93.3121 255.746 93.3121 231.204L93.3121 193.623L119.388 193.623L119.388 231.204C119.388 241.327 127.62 249.61 137.795 249.61C147.97 249.61 156.202 241.379 156.202 231.204L156.202 193.623L182.483 193.623L182.483 231.204" })
9523
+ ] })
9524
+ }
9525
+ );
9526
+ const LuxIcon = ({ icon, children }) => {
9527
+ return /* @__PURE__ */ jsxRuntimeExports.jsxs(Icon, { children: [
9528
+ /* @__PURE__ */ jsxRuntimeExports.jsx("style", { children: `svg {
9529
+ fill: currentColor;
9530
+ }` }),
9531
+ icon ?? /* @__PURE__ */ jsxRuntimeExports.jsx(FallbackIcon, {}),
9532
+ children
9533
+ ] });
9534
+ };
9509
9535
  const InfoIcon = () => /* @__PURE__ */ jsxRuntimeExports.jsxs(
9510
9536
  "svg",
9511
9537
  {
@@ -9629,8 +9655,8 @@
9629
9655
  warning: WarningIcon,
9630
9656
  error: ErrorIcon
9631
9657
  };
9632
- const Icon2 = icons[type];
9633
- const icon = Icon2 ? /* @__PURE__ */ jsxRuntimeExports.jsx(Icon2, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
9658
+ const AlertIcon = icons[type];
9659
+ const icon = AlertIcon ? /* @__PURE__ */ jsxRuntimeExports.jsx(LuxIcon, { icon: /* @__PURE__ */ jsxRuntimeExports.jsx(AlertIcon, {}) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
9634
9660
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
9635
9661
  Alert,
9636
9662
  {
@@ -9713,32 +9739,6 @@
9713
9739
  const LuxHeading6 = ({ ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx(LuxHeading, { ...props, level: 6 });
9714
9740
  HeadingGroup.displayName = "LuxHeadingGroup";
9715
9741
  const LuxHeadingGroup = HeadingGroup;
9716
- const LuxIconFallbackSVGTestId = "lux-icon-fallback-svg";
9717
- const FallbackIcon = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(
9718
- "svg",
9719
- {
9720
- xmlns: "http://www.w3.org/2000/svg",
9721
- viewBox: "0 0 440 440",
9722
- width: "1em",
9723
- height: "1em",
9724
- "data-icon-name": "zoek",
9725
- "data-testid": LuxIconFallbackSVGTestId,
9726
- ...props,
9727
- children: /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { children: [
9728
- /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M182.483 437.665L219.245 437.665L219.245 271.697C213.621 274.254 207.434 275.737 200.838 275.737C194.242 275.737 188.056 274.254 182.431 271.697L182.431 437.665L182.483 437.665Z" }),
9729
- /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M182.483 231.306C182.483 241.43 190.766 249.662 200.889 249.662C211.013 249.662 219.296 241.43 219.296 231.255L219.296 193.674L245.372 193.674L245.372 231.255C245.372 241.379 253.604 249.662 263.779 249.662C273.954 249.662 282.186 241.43 282.186 231.255L282.186 193.674L308.262 193.674L308.262 231.255C308.262 255.797 288.321 275.738 263.779 275.738C257.234 275.738 250.997 274.255 245.372 271.699L245.372 437.666L315.88 437.666L315.88 428.769C315.88 375.901 308.824 375.646 345.229 337.298C383.883 296.548 405.562 239.538 398.762 177.466C388.689 85.6882 314.602 11.4476 222.875 1.27273C102.158 -12.1233 0.000107732 82.0068 8.70987e-05 200.014C7.78817e-05 252.729 20.452 300.536 53.7376 336.224C90.1931 375.236 84.1087 375.441 84.1087 428.821L84.1087 437.615L156.406 437.615L156.406 271.545C150.731 274.153 144.442 275.687 137.795 275.687C113.253 275.687 93.3121 255.746 93.3121 231.204L93.3121 193.623L119.388 193.623L119.388 231.204C119.388 241.327 127.62 249.61 137.795 249.61C147.97 249.61 156.202 241.379 156.202 231.204L156.202 193.623L182.483 193.623L182.483 231.204" })
9730
- ] })
9731
- }
9732
- );
9733
- const LuxIcon = ({ icon, children }) => {
9734
- return /* @__PURE__ */ jsxRuntimeExports.jsxs(Icon, { children: [
9735
- /* @__PURE__ */ jsxRuntimeExports.jsx("style", { children: `svg {
9736
- fill: currentColor;
9737
- }` }),
9738
- icon ?? /* @__PURE__ */ jsxRuntimeExports.jsx(FallbackIcon, {}),
9739
- children
9740
- ] });
9741
- };
9742
9742
  const LuxFormField = React.forwardRef(
9743
9743
  ({ children, className, ...restProps }, ref) => {
9744
9744
  return /* @__PURE__ */ jsxRuntimeExports.jsx(FormField, { ref, className, ...restProps, children });
@@ -10216,7 +10216,7 @@
10216
10216
  id,
10217
10217
  name,
10218
10218
  value,
10219
- className,
10219
+ className: clsx("lux-radio-button", className),
10220
10220
  checked,
10221
10221
  ...restProps
10222
10222
  }
@@ -10435,7 +10435,7 @@
10435
10435
  try {
10436
10436
  if (typeof document != "undefined") {
10437
10437
  var elementStyle = document.createElement("style");
10438
- 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.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}'));
10438
+ 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::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/* 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}'));
10439
10439
  document.head.appendChild(elementStyle);
10440
10440
  }
10441
10441
  } catch (e) {
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.2.0",
2
+ "version": "1.2.1",
3
3
  "author": "Community for NL Design System",
4
4
  "description": "React component library for LUX, the Design System for Logius, based on the NL Design System architecture",
5
5
  "license": "EUPL-1.2",