@utrecht/components/textbox/dist/index.css

Components for the Municipality of Utrecht based on the NL Design System architecture

/**
 * @license EUPL-1.2
 * Copyright (c) 2021 Robbert Broersma
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2021 Gemeente Utrecht
 * Copyright (c) 2021 Robbert Broersma
 */
/* stylelint-disable-next-line block-no-empty */
/**
 * @license EUPL-1.2
 * Copyright (c) 2021 Robbert Broersma
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2021 Gemeente Utrecht
 * Copyright (c) 2021 Robbert Broersma
 */
/* stylelint-disable-next-line block-no-empty */
/* TODO: Enable ordering properties when the plugin supports logical CSS properties
 * https://github.com/hudochenkov/stylelint-order/pull/162 */
/* stylelint-disable order/properties-alphabetical-order */
.utrecht-textbox {
  /* The average character inline-size is an approximation, with a default that works for Dutch text.
   * The average might need to be configured specifically, for other scripts (CJK characters)
   * and very wide or very narrow fonts.
   * For monospace fonts it can be set to `1ch`.
   */
  --_utrecht-textbox-value-char: 0.667em + 0.334ch;
  /* Because this element uses `border-box` box-sizing, we need to manually add up the
    * border width, padding width and the content width.
    * 
    * Browsers and browser addons can add buttons inside the content box, for example
    * for autocomplete. To avoid overlap between the UI and the text, we reserve
    * some additional pixels to make space. We use 44px in accordance with the WCAG target size.
    * 
    * When you are certain an element has no such UI, you can set the `autocomplete-ui-size` to `0px` (not to `0`).
    */
  --_utrecht-textbox-max-inline-size: calc(
    calc(var(--utrecht-textbox-value-max-length) * var(--_utrecht-textbox-value-char)) +
      var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, 0)) +
      var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, 0)) +
      var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width, 0)) +
      var(--utrecht-textbox-autocomplete-ui-size, 44px)
  );
  background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));
  block-size: initial; /* harden */
  border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));
  border-block-end-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width)));
  border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color));
  border-radius: var(--utrecht-textbox-border-radius, var(--utrecht-form-control-border-radius, 0));
  border-style: solid;
  box-sizing: border-box;
  color: var(--utrecht-textbox-color, var(--utrecht-form-control-color));
  font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));
  font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));
  font-weight: var(--utrecht-textbox-font-weight, var(--utrecht-form-control-font-weight, initial)); /* harden with `initial` */
  inline-size: 100%;
  line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));
  min-block-size: var(--utrecht-pointer-target-min-size, 44px);
  min-inline-size: var(--utrecht-pointer-target-min-size, 44px);
  max-inline-size: min(var(--_utrecht-textbox-max-inline-size, 100%), var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size)));
  padding-block-end: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));
  padding-block-start: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));
  padding-inline-end: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));
  padding-inline-start: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
}

.utrecht-textbox--invalid {
  --_utrecht-textbox-border-width: var(
    --utrecht-textbox-invalid-border-width,
    var(
      --utrecht-form-control-invalid-border-width,
      var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
    )
  );
  background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
  border-width: var(--_utrecht-textbox-border-width);
  border-block-end-width: var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)))));
  border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
  color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
}

.utrecht-textbox--disabled {
  background-color: var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
  border-color: var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
  color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
}

.utrecht-textbox--focus {
  background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
  border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
  color: var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
}

.utrecht-textbox--focus-visible {
  /* - The browser default focus ring should apply when these CSS custom properties are not set.
   * - Make the `box-shadow` value available, so components that have their own `box-shadow`
   *   can combine it with the focus ring box shadow.
   */
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
    var(--utrecht-focus-inverse-outline-color, transparent);
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
  outline-color: var(--utrecht-focus-outline-color, revert);
  outline-offset: var(--utrecht-focus-outline-offset, revert);
  outline-style: var(--utrecht-focus-outline-style, revert);
  outline-width: var(--utrecht-focus-outline-width, revert);
}

.utrecht-textbox--read-only {
  background-color: var(--utrecht-textbox-read-only-background-color, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
  border-color: var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
  color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
}

.utrecht-textbox__placeholder {
  color: var(--utrecht-textbox-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
  font-style: var(--utrecht-form-control-placeholder-font-style);
  opacity: 100%;
}

.utrecht-textbox--numeric {
  -moz-appearance: textfield; /* avoid spinner input in Firefox */
  font-variant-numeric: lining-nums tabular-nums;
}

.utrecht-textbox--password {
  font-variant-ligatures: none;
  font-variant-numeric: slashed-zero;
}

.utrecht-textbox--postal-code-nl-size {
  /* Dutch postal code: 4 numbers, 1 space and 2 letters */
  --utrecht-textbox-value-max-length: 7;
}

.utrecht-textbox--house-number-size {
  /* Dutch house number is 99999 at most: 5 numbers */
  --utrecht-textbox-value-max-length: 5;
}

.utrecht-textbox--house-letter-size {
  /* Dutch house letter is 1 letter */
  --utrecht-textbox-value-max-length: 1;
}

.utrecht-textbox--house-addition-size {
  /* Dutch house addition is optional, between 1 and 4 alphanumeric characters */
  --utrecht-textbox-value-max-length: 4;
}

.utrecht-textbox--voorvoegsel-size {
  /* "Tabel 36 Voorvoegselstabel" by "Rijksdienst voor Identiteitsgegevens" has a list
   * of all allowed values. The longest value is 10 characters.
   * The class name is in Dutch because it is a Dutch concept. */
  --utrecht-textbox-value-max-length: 10;
}

.utrecht-textbox--tel-size {
  /* International telephone number standard E.164 allows 15 numbers, with optional space for 4 spaces */
  --utrecht-textbox-value-max-length: 19;
}

.utrecht-textbox--tel-nl-size {
  /* Dutch telephone number: 10 number, typically with at most 3 spaces */
  --utrecht-textbox-value-max-length: 13;
}

.utrecht-textbox--iban-size {
  /* Maximum IBAN: 33 characters, plus 8 spaces (one space after every 4 characters) */
  --utrecht-textbox-value-max-length: 41;
}

.utrecht-textbox--iban-nl-size {
  /* Dutch IBAN: 18 characters, plus 4 spaces (one space after every 4 characters) */
  --utrecht-textbox-value-max-length: 22;
}

/**
 * This class name is experimental.
 */
.utrecht-textbox--placeholder-ltr::placeholder, .utrecht-textbox--placeholder-ltr:placeholder-shown {
  /* For <input dir="rtr" placeholder="+31 555 1234">,
   * behave as `dir="auto"` when the placeholder is shown. */
  direction: ltr;
}

/**
 * This class name is experimental.
 */
.utrecht-textbox--placeholder-rtl::placeholder, .utrecht-textbox--placeholder-rtl:placeholder-shown {
  /* For <input dir="rtr" placeholder="+31 555 1234">,
   * behave as `dir="auto"` when the placeholder is shown. */
  direction: rtl;
}

.utrecht-textbox--url {
  font-variant-ligatures: none;
}

.utrecht-textbox--html-input {
  /* The `input:read-only` pseudo selector applies to both `<input readonly>` and `<input disabled>` */
  /*
   * The `input:disabled` pseudo selector applies to `<input disabled>`, but not to `<input aria-disabled="true">`
   *
   * We consider `disabled` more specific than `read-only`, so the `:disabled` selector should come after the `:read-only` selector.
   */
}
.utrecht-textbox--html-input:focus {
  background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
  border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
  color: var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
}
.utrecht-textbox--html-input:focus-visible {
  /* - The browser default focus ring should apply when these CSS custom properties are not set.
   * - Make the `box-shadow` value available, so components that have their own `box-shadow`
   *   can combine it with the focus ring box shadow.
   */
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
    var(--utrecht-focus-inverse-outline-color, transparent);
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
  outline-color: var(--utrecht-focus-outline-color, revert);
  outline-offset: var(--utrecht-focus-outline-offset, revert);
  outline-style: var(--utrecht-focus-outline-style, revert);
  outline-width: var(--utrecht-focus-outline-width, revert);
}
.utrecht-textbox--html-input:invalid, .utrecht-textbox--html-input[aria-invalid=true] {
  --_utrecht-textbox-border-width: var(
    --utrecht-textbox-invalid-border-width,
    var(
      --utrecht-form-control-invalid-border-width,
      var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
    )
  );
  background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
  border-width: var(--_utrecht-textbox-border-width);
  border-block-end-width: var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)))));
  border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
  color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
}
.utrecht-textbox--html-input:read-only {
  background-color: var(--utrecht-textbox-read-only-background-color, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
  border-color: var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
  color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
}
.utrecht-textbox--html-input:disabled {
  background-color: var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
  border-color: var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
  color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
}
.utrecht-textbox--html-input::placeholder {
  color: var(--utrecht-textbox-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
  font-style: var(--utrecht-form-control-placeholder-font-style);
  opacity: 100%;
}
.utrecht-textbox--html-input[type=password i] {
  font-variant-ligatures: none;
  font-variant-numeric: slashed-zero;
}
.utrecht-textbox--html-input[type=url i], .utrecht-textbox--html-input[type=email i], .utrecht-textbox--html-input[inputMode=email i], .utrecht-textbox--html-input[inputMode=url i] {
  font-variant-ligatures: none;
}
.utrecht-textbox--html-input[pattern="\\d*"], .utrecht-textbox--html-input[pattern="[0-9]*"], .utrecht-textbox--html-input[type=number i], .utrecht-textbox--html-input[type=tel i], .utrecht-textbox--html-input[inputMode=numeric i], .utrecht-textbox--html-input[inputMode=decimal i], .utrecht-textbox--html-input[inputMode=tel i] {
  -moz-appearance: textfield; /* avoid spinner input in Firefox */
  font-variant-numeric: lining-nums tabular-nums;
}