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

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 (33) hide show
  1. package/dist/index.mjs +99 -1
  2. package/dist/index.umd.js +99 -1
  3. package/dist/jest.setup.d.ts +0 -0
  4. package/dist/src/alert/test/Alert.spec.d.ts +1 -0
  5. package/dist/src/button/test/Button.spec.d.ts +1 -0
  6. package/dist/src/checkbox/test/Checkbox.spec.d.ts +1 -0
  7. package/dist/src/document/test/document.spec.d.ts +1 -0
  8. package/dist/src/form-field/test/FormField.spec.d.ts +1 -0
  9. package/dist/src/form-field-checkbox/test/form-field-checkbox.spec.d.ts +1 -0
  10. package/dist/src/form-field-description/test/FormFieldDescription.spec.d.ts +1 -0
  11. package/dist/src/form-field-error-message/test/FormFieldErrorMessage.spec.d.ts +1 -0
  12. package/dist/src/form-field-label/test/FormFieldLabel.spec.d.ts +1 -0
  13. package/dist/src/form-field-radio-group/test/FormFieldRadioGroup.spec.d.ts +1 -0
  14. package/dist/src/form-field-radio-option/test/FormFieldRadioOption.spec.d.ts +1 -0
  15. package/dist/src/form-field-select/test/form-field-select.spec.d.ts +1 -0
  16. package/dist/src/form-field-textarea/FormFieldTextarea.d.ts +9 -0
  17. package/dist/src/form-field-textarea/test/form-field-textarea.spec.d.ts +1 -0
  18. package/dist/src/form-field-textbox/test/form-field-textbox.spec.d.ts +1 -0
  19. package/dist/src/heading/test/Heading.spec.d.ts +1 -0
  20. package/dist/src/heading-group/test/HeadingGroup.spec.d.ts +1 -0
  21. package/dist/src/icon/test/Icon.spec.d.ts +1 -0
  22. package/dist/src/index.d.ts +2 -0
  23. package/dist/src/index.test.d.ts +1 -0
  24. package/dist/src/link/test/Link.spec.d.ts +1 -0
  25. package/dist/src/paragraph/test/paragraph.spec.d.ts +1 -0
  26. package/dist/src/pre-heading/test/PreHeading.spec.d.ts +1 -0
  27. package/dist/src/radio-button/test/RadioButton.spec.d.ts +1 -0
  28. package/dist/src/section/test/Section.spec.d.ts +1 -0
  29. package/dist/src/select/test/Select.spec.d.ts +1 -0
  30. package/dist/src/textarea/Textarea.d.ts +8 -0
  31. package/dist/src/textarea/test/Textarea.spec.d.ts +1 -0
  32. package/dist/src/textbox/test/Textbox.spec.d.ts +1 -0
  33. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -5742,6 +5742,102 @@ const LuxFormFieldSelect = ({
5742
5742
  }
5743
5743
  );
5744
5744
  };
5745
+ const LuxTextArea = forwardRef(
5746
+ ({
5747
+ className,
5748
+ invalid,
5749
+ disabled,
5750
+ readOnly,
5751
+ required,
5752
+ dir,
5753
+ inputRequired,
5754
+ ...restProps
5755
+ }, ref) => {
5756
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(
5757
+ Textarea,
5758
+ {
5759
+ ...restProps,
5760
+ ref,
5761
+ className: clsx(className, "lux-textarea"),
5762
+ disabled,
5763
+ readOnly,
5764
+ invalid,
5765
+ required,
5766
+ dir: dir ?? "auto",
5767
+ inputRequired
5768
+ }
5769
+ );
5770
+ }
5771
+ );
5772
+ LuxTextArea.displayName = "LuxTextArea";
5773
+ const LuxFormFieldTextarea = ({
5774
+ label,
5775
+ description,
5776
+ errorMessage,
5777
+ disabled,
5778
+ invalid,
5779
+ appearance,
5780
+ distanced,
5781
+ className,
5782
+ inputRef,
5783
+ inputDir,
5784
+ ...restProps
5785
+ }) => {
5786
+ const inputId = useId();
5787
+ const descriptionId = useId();
5788
+ const errorMessageId = useId();
5789
+ const labelNode = typeof label === "string" ? /* @__PURE__ */ jsxRuntimeExports.jsx(LuxFormFieldLabel, { disabled, htmlFor: inputId, children: label }) : label;
5790
+ const descriptionNode = typeof description === "string" ? /* @__PURE__ */ jsxRuntimeExports.jsx(LuxFormFieldDescription, { appearance: invalid ? "invalid" : appearance, id: descriptionId, children: description }) : description;
5791
+ const errorMessageNode = typeof errorMessage === "string" ? /* @__PURE__ */ jsxRuntimeExports.jsx(LuxFormFieldErrorMessage, { distanced, id: errorMessageId, children: errorMessage }) : errorMessage;
5792
+ const textareaAttrs = pick(restProps, [
5793
+ "autoComplete",
5794
+ "cols",
5795
+ "defaultValue",
5796
+ "maxLength",
5797
+ "minLength",
5798
+ "name",
5799
+ "onBlur",
5800
+ "onChange",
5801
+ "onFocus",
5802
+ "onInput",
5803
+ "placeholder",
5804
+ "readOnly",
5805
+ "required",
5806
+ "rows",
5807
+ "value",
5808
+ "onBlur",
5809
+ "onChange",
5810
+ "onFocus",
5811
+ "onInput"
5812
+ ]);
5813
+ const formFieldAttrs = pick(restProps, ["children"]);
5814
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(
5815
+ LuxFormField,
5816
+ {
5817
+ label: labelNode,
5818
+ description: descriptionNode,
5819
+ errorMessage: errorMessageNode,
5820
+ invalid,
5821
+ input: /* @__PURE__ */ jsxRuntimeExports.jsx(
5822
+ LuxTextArea,
5823
+ {
5824
+ ref: inputRef,
5825
+ id: inputId,
5826
+ invalid,
5827
+ disabled,
5828
+ dir: inputDir || "auto",
5829
+ "aria-describedby": clsx({
5830
+ [descriptionId]: description,
5831
+ [errorMessageId]: invalid
5832
+ }) || void 0,
5833
+ ...textareaAttrs
5834
+ }
5835
+ ),
5836
+ className,
5837
+ ...formFieldAttrs
5838
+ }
5839
+ );
5840
+ };
5745
5841
  const TEXTBOX_CLASSES = {
5746
5842
  invalid: "utrecht-textbox--invalid",
5747
5843
  disabled: "utrecht-textbox--disabled",
@@ -6090,6 +6186,7 @@ export {
6090
6186
  LuxFormFieldRadioGroup,
6091
6187
  LuxFormFieldRadioOption,
6092
6188
  LuxFormFieldSelect,
6189
+ LuxFormFieldTextarea,
6093
6190
  LuxFormFieldTextbox,
6094
6191
  LuxHeading,
6095
6192
  LuxHeading1,
@@ -6106,6 +6203,7 @@ export {
6106
6203
  LuxSection,
6107
6204
  LuxSelect,
6108
6205
  LuxSelectOption,
6206
+ LuxTextArea,
6109
6207
  LuxTextbox
6110
6208
  };
6111
6209
  (function() {
@@ -6113,7 +6211,7 @@ export {
6113
6211
  try {
6114
6212
  if (typeof document != "undefined") {
6115
6213
  var elementStyle = document.createElement("style");
6116
- 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 line-height: var(--lux-line-height-body-default);\n\n & :focus {\n border-width: var(--lux-border-width-m);\n }\n\n & :hover {\n border-width: var(--lux-border-width-m);\n border-color: var(--lux-border-strong);\n background-color: var(--lux-color-background-default);\n color: var(--lux-color-foreground-default);\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}'));
6214
+ 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}'));
6117
6215
  document.head.appendChild(elementStyle);
6118
6216
  }
6119
6217
  } catch (e) {
package/dist/index.umd.js CHANGED
@@ -5745,6 +5745,102 @@
5745
5745
  }
5746
5746
  );
5747
5747
  };
5748
+ const LuxTextArea = React.forwardRef(
5749
+ ({
5750
+ className,
5751
+ invalid,
5752
+ disabled,
5753
+ readOnly,
5754
+ required,
5755
+ dir,
5756
+ inputRequired,
5757
+ ...restProps
5758
+ }, ref) => {
5759
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(
5760
+ Textarea,
5761
+ {
5762
+ ...restProps,
5763
+ ref,
5764
+ className: clsx(className, "lux-textarea"),
5765
+ disabled,
5766
+ readOnly,
5767
+ invalid,
5768
+ required,
5769
+ dir: dir ?? "auto",
5770
+ inputRequired
5771
+ }
5772
+ );
5773
+ }
5774
+ );
5775
+ LuxTextArea.displayName = "LuxTextArea";
5776
+ const LuxFormFieldTextarea = ({
5777
+ label,
5778
+ description,
5779
+ errorMessage,
5780
+ disabled,
5781
+ invalid,
5782
+ appearance,
5783
+ distanced,
5784
+ className,
5785
+ inputRef,
5786
+ inputDir,
5787
+ ...restProps
5788
+ }) => {
5789
+ const inputId = React.useId();
5790
+ const descriptionId = React.useId();
5791
+ const errorMessageId = React.useId();
5792
+ const labelNode = typeof label === "string" ? /* @__PURE__ */ jsxRuntimeExports.jsx(LuxFormFieldLabel, { disabled, htmlFor: inputId, children: label }) : label;
5793
+ const descriptionNode = typeof description === "string" ? /* @__PURE__ */ jsxRuntimeExports.jsx(LuxFormFieldDescription, { appearance: invalid ? "invalid" : appearance, id: descriptionId, children: description }) : description;
5794
+ const errorMessageNode = typeof errorMessage === "string" ? /* @__PURE__ */ jsxRuntimeExports.jsx(LuxFormFieldErrorMessage, { distanced, id: errorMessageId, children: errorMessage }) : errorMessage;
5795
+ const textareaAttrs = pick(restProps, [
5796
+ "autoComplete",
5797
+ "cols",
5798
+ "defaultValue",
5799
+ "maxLength",
5800
+ "minLength",
5801
+ "name",
5802
+ "onBlur",
5803
+ "onChange",
5804
+ "onFocus",
5805
+ "onInput",
5806
+ "placeholder",
5807
+ "readOnly",
5808
+ "required",
5809
+ "rows",
5810
+ "value",
5811
+ "onBlur",
5812
+ "onChange",
5813
+ "onFocus",
5814
+ "onInput"
5815
+ ]);
5816
+ const formFieldAttrs = pick(restProps, ["children"]);
5817
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(
5818
+ LuxFormField,
5819
+ {
5820
+ label: labelNode,
5821
+ description: descriptionNode,
5822
+ errorMessage: errorMessageNode,
5823
+ invalid,
5824
+ input: /* @__PURE__ */ jsxRuntimeExports.jsx(
5825
+ LuxTextArea,
5826
+ {
5827
+ ref: inputRef,
5828
+ id: inputId,
5829
+ invalid,
5830
+ disabled,
5831
+ dir: inputDir || "auto",
5832
+ "aria-describedby": clsx({
5833
+ [descriptionId]: description,
5834
+ [errorMessageId]: invalid
5835
+ }) || void 0,
5836
+ ...textareaAttrs
5837
+ }
5838
+ ),
5839
+ className,
5840
+ ...formFieldAttrs
5841
+ }
5842
+ );
5843
+ };
5748
5844
  const TEXTBOX_CLASSES = {
5749
5845
  invalid: "utrecht-textbox--invalid",
5750
5846
  disabled: "utrecht-textbox--disabled",
@@ -6092,6 +6188,7 @@
6092
6188
  exports2.LuxFormFieldRadioGroup = LuxFormFieldRadioGroup;
6093
6189
  exports2.LuxFormFieldRadioOption = LuxFormFieldRadioOption;
6094
6190
  exports2.LuxFormFieldSelect = LuxFormFieldSelect;
6191
+ exports2.LuxFormFieldTextarea = LuxFormFieldTextarea;
6095
6192
  exports2.LuxFormFieldTextbox = LuxFormFieldTextbox;
6096
6193
  exports2.LuxHeading = LuxHeading;
6097
6194
  exports2.LuxHeading1 = LuxHeading1;
@@ -6108,6 +6205,7 @@
6108
6205
  exports2.LuxSection = LuxSection;
6109
6206
  exports2.LuxSelect = LuxSelect;
6110
6207
  exports2.LuxSelectOption = LuxSelectOption;
6208
+ exports2.LuxTextArea = LuxTextArea;
6111
6209
  exports2.LuxTextbox = LuxTextbox;
6112
6210
  Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
6113
6211
  });
@@ -6116,7 +6214,7 @@
6116
6214
  try {
6117
6215
  if (typeof document != "undefined") {
6118
6216
  var elementStyle = document.createElement("style");
6119
- 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 line-height: var(--lux-line-height-body-default);\n\n & :focus {\n border-width: var(--lux-border-width-m);\n }\n\n & :hover {\n border-width: var(--lux-border-width-m);\n border-color: var(--lux-border-strong);\n background-color: var(--lux-color-background-default);\n color: var(--lux-color-foreground-default);\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}'));
6217
+ 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}'));
6120
6218
  document.head.appendChild(elementStyle);
6121
6219
  }
6122
6220
  } catch (e) {
package/dist/jest.setup.d.ts ADDED
File without changes
package/dist/src/alert/test/Alert.spec.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/src/button/test/Button.spec.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/src/checkbox/test/Checkbox.spec.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/src/document/test/document.spec.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/src/form-field/test/FormField.spec.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/src/form-field-textarea/FormFieldTextarea.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import { FormFieldTextareaProps as UtrechtFormFieldTextareaProps } from '@utrecht/component-library-react/dist/css-module';
2
+ import { LuxFormFieldDescriptionAppearance } from '../form-field-description/FormFieldDescription';
3
+ import { Direction } from '../textarea/Textarea';
4
+ export type LuxFormFieldTextareaProps = UtrechtFormFieldTextareaProps & {
5
+ appearance?: LuxFormFieldDescriptionAppearance;
6
+ distanced?: boolean;
7
+ inputDir?: Direction;
8
+ };
9
+ export declare const LuxFormFieldTextarea: ({ label, description, errorMessage, disabled, invalid, appearance, distanced, className, inputRef, inputDir, ...restProps }: LuxFormFieldTextareaProps) => import("react/jsx-runtime").JSX.Element;
package/dist/src/heading/test/Heading.spec.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/src/heading-group/test/HeadingGroup.spec.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/src/icon/test/Icon.spec.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/src/index.d.ts CHANGED
@@ -11,6 +11,7 @@ export { LuxFormFieldDescription, type LuxFormFieldDescriptionProps, } from './f
11
11
  export { LuxFormFieldErrorMessage, type LuxFormFieldErrorMessageProps, } from './form-field-error-message/FormFieldErrorMessage';
12
12
  export { LuxFormFieldLabel, type LuxFormFieldLabelProps } from './form-field-label/FormFieldLabel';
13
13
  export { LuxFormFieldSelect, type LuxFormFieldSelectProps, type LuxFormFieldSelectOptionsProps, } from './form-field-select/FormFieldSelect';
14
+ export { LuxFormFieldTextarea, type LuxFormFieldTextareaProps } from './form-field-textarea/FormFieldTextarea';
14
15
  export { LuxFormFieldTextbox, type LuxFormFieldTextboxProps } from './form-field-textbox/FormFieldTextbox';
15
16
  export { LuxParagraph, type LuxParagraphProps } from './paragraph/Paragraph';
16
17
  export { LuxFormFieldRadioOption, type LuxFormFieldRadioOptionProps, } from './form-field-radio-option/FormFieldRadioOption';
@@ -20,3 +21,4 @@ export { LuxPreHeading, type LuxPreHeadingProps } from './pre-heading/PreHeading
20
21
  export { LuxSection, type LuxSectionProps } from './section/Section';
21
22
  export { LuxSelect, LuxSelectOption, type LuxSelectProps, type LuxSelectOptionProps } from './select/Select';
22
23
  export { LuxTextbox, INPUT_TYPES, type LuxTextboxProps } from './textbox/Textbox';
24
+ export { LuxTextArea, type LuxTextAreaProps } from './textarea/Textarea';
package/dist/src/index.test.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/src/link/test/Link.spec.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/src/paragraph/test/paragraph.spec.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/src/pre-heading/test/PreHeading.spec.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/src/radio-button/test/RadioButton.spec.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/src/section/test/Section.spec.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/src/select/test/Select.spec.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/src/textarea/Textarea.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import { TextareaProps as UtrechtTextareaProps } from '@utrecht/component-library-react/dist/css-module';
2
+ export type Direction = 'ltr' | 'rtl' | 'auto';
3
+ export interface LuxTextAreaProps extends UtrechtTextareaProps {
4
+ dir?: Direction;
5
+ }
6
+ export declare const LuxTextArea: import('react').ForwardRefExoticComponent<LuxTextAreaProps & {
7
+ children?: import('react').ReactNode | undefined;
8
+ } & import('react').RefAttributes<HTMLTextAreaElement>>;
package/dist/src/textarea/test/Textarea.spec.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/src/textbox/test/Textbox.spec.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.0.1",
2
+ "version": "1.1.0",
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",