@navikt/ds-css 2.8.16 → 2.9.0

package/dist/component/form.css

@@ -0,0 +1,734 @@
+/*
+  Order matters; rearrange with care
+*/
+.navds-fieldset {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  min-width: 0;
+}
+.navds-fieldset > :not(:first-child):not(:empty) {
+  margin-top: var(--a-spacing-2);
+}
+.navds-fieldset > .navds-fieldset__description:not(:empty) {
+  margin-top: var(--a-spacing-1);
+}
+/* Applied when hideLegend is applied to fieldset */
+.navds-fieldset > .navds-sr-only + :not(:first-child):not(:empty) {
+  margin-top: 0;
+}
+.navds-fieldset__legend {
+  padding: 0;
+}
+.navds-fieldset:disabled > .navds-fieldset__legend,
+.navds-fieldset:disabled > .navds-fieldset__description {
+  opacity: 0.3;
+}
+.navds-form-field {
+  display: grid;
+  justify-items: start;
+  gap: var(--a-spacing-2);
+}
+.navds-form-field__description {
+  margin-top: -4px;
+}
+.navds-form-field .navds-error-message,
+.navds-fieldset .navds-error-message {
+  display: flex;
+  gap: var(--a-spacing-2);
+}
+.navds-form-field .navds-error-message::before,
+.navds-fieldset .navds-error-message::before {
+  content: "•";
+}
+.navds-form-field--disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+.navds-form-field__error:empty {
+  display: none;
+}
+.navds-error-summary {
+  background-color: var(--ac-error-summary-bg, var(--a-surface-default));
+  padding: var(--a-spacing-5);
+  border: 4px solid var(--ac-error-summary-border, var(--a-border-danger));
+}
+.navds-error-summary--small {
+  padding: var(--a-spacing-3);
+}
+.navds-error-summary:focus {
+  box-shadow: var(--a-shadow-focus);
+  outline: none;
+}
+.navds-error-summary__list {
+  margin: var(--a-spacing-3) 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--a-spacing-3);
+  padding-left: var(--a-spacing-6);
+  list-style: inherit;
+}
+.navds-error-summary__list > * {
+  color: var(--ac-error-summary-list-dot, var(--a-text-action));
+}
+.navds-error-summary--small > .navds-error-summary__list {
+  margin: var(--a-spacing-2) 0;
+  gap: var(--a-spacing-2);
+  padding-left: var(--a-spacing-5);
+}
+.navds-confirmation-panel__inner {
+  display: flex;
+  flex-direction: column;
+  gap: var(--a-spacing-3);
+  padding: var(--a-spacing-4);
+  border-radius: var(--a-border-radius-medium);
+  border: 1px solid var(--ac-confirmation-panel-border, var(--a-border-warning));
+  background-color: var(--ac-confirmation-panel-bg, var(--a-surface-warning-subtle));
+  transition: background-color linear 100ms;
+  justify-self: stretch;
+}
+.navds-confirmation-panel__content {
+  max-width: 80ch;
+}
+.navds-confirmation-panel--checked .navds-confirmation-panel__inner {
+  border-color: var(--ac-confirmation-panel-checked-border, var(--a-border-success));
+  background-color: var(--ac-confirmation-panel-checked-bg, var(--a-surface-success-subtle));
+}
+.navds-confirmation-panel--error .navds-confirmation-panel__inner {
+  border-color: var(--ac-confirmation-panel-error-border, var(--a-border-danger));
+  background-color: var(--ac-confirmation-panel-error-bg, var(--a-surface-danger-subtle));
+}
+.navds-checkbox,
+.navds-radio {
+  position: relative;
+  width: fit-content;
+}
+.navds-checkbox__input,
+.navds-radio__input {
+  position: absolute;
+  width: 48px;
+  height: 48px;
+  top: 0;
+  left: -12px;
+  z-index: 1;
+  opacity: 0;
+  cursor: pointer;
+}
+.navds-checkbox__label,
+.navds-radio__label {
+  padding: var(--a-spacing-3) 0;
+  cursor: pointer;
+  display: flex;
+  gap: var(--a-spacing-2);
+}
+.navds-checkbox__label::before,
+.navds-radio__label::before {
+  content: "";
+  background-color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
+  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default));
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: var(--a-border-radius-medium);
+  flex-shrink: 0;
+}
+.navds-radio__label::before {
+  border-radius: var(--a-border-radius-full);
+}
+.navds-checkbox__content,
+.navds-radio__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--a-spacing-1);
+}
+.navds-checkbox--small > .navds-checkbox__input,
+.navds-radio--small > .navds-radio__input {
+  width: 32px;
+  height: 32px;
+  top: 0;
+  left: -6px;
+}
+.navds-checkbox--small > .navds-checkbox__label,
+.navds-radio--small > .navds-radio__label {
+  padding: 6px 0;
+}
+.navds-checkbox--small > .navds-checkbox__label::before,
+.navds-radio--small > .navds-radio__label::before {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.navds-checkbox__input:focus + .navds-checkbox__label::before,
+.navds-radio__input:focus + .navds-radio__label::before {
+  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), var(--a-shadow-focus);
+}
+.navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
+.navds-radio__input:hover:focus + .navds-radio__label::before {
+  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), var(--a-shadow-focus);
+}
+.navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
+  box-shadow: none;
+  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
+}
+.navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  transform: translate(0.375rem, -50%);
+  background-color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
+  width: 0.75rem;
+  height: 0.25rem;
+  border-radius: 1px; /* Custom value OK */
+  flex-shrink: 0;
+}
+.navds-checkbox--small .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+  transform: translate(0.25rem, -50%);
+}
+.navds-checkbox__input:checked + .navds-checkbox__label::before {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
+  background-position: 6px center;
+  background-repeat: no-repeat;
+  background-size: 13px;
+  box-shadow: none;
+  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
+}
+.navds-checkbox--small > .navds-checkbox__input:checked + .navds-checkbox__label::before {
+  background-position: 4px center;
+}
+.navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
+.navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
+  box-shadow: inset 0 0 0 1px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
+}
+.navds-radio__input:checked + .navds-radio__label::before {
+  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+    inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default));
+  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
+}
+.navds-radio__input:checked:focus + .navds-radio__label::before {
+  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+    inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
+}
+.navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
+.navds-radio__input:hover:not(:disabled) + .navds-radio__label {
+  color: var(--ac-radio-checkbox-action, var(--a-surface-action));
+}
+.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus) + .navds-checkbox__label::before,
+.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
+  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
+}
+.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate) + .navds-checkbox__label::before,
+.navds-radio__input:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
+  background-color: var(--ac-radio-checkbox-action-hover-bg, var(--a-surface-action-subtle));
+}
+.navds-checkbox--error
+  > .navds-checkbox__input:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
+  + .navds-checkbox__label::before,
+.navds-radio--error > .navds-radio__input:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
+  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
+}
+.navds-checkbox--error
+  > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
+  + .navds-checkbox__label::before,
+.navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
+  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+}
+.navds-checkbox--error
+  > .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
+  + .navds-checkbox__label::before,
+.navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
+  background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
+  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
+}
+.navds-checkbox--error
+  > .navds-checkbox__input:focus:hover:not(:disabled):not(:checked):not(:indeterminate)
+  + .navds-checkbox__label::before,
+.navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
+  background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
+  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+}
+.navds-checkbox--disabled,
+.navds-radio--disabled {
+  opacity: 0.3;
+}
+.navds-checkbox--disabled > .navds-checkbox__input,
+.navds-checkbox--disabled > .navds-checkbox__label,
+.navds-radio--disabled > .navds-radio__input,
+.navds-radio--disabled > .navds-radio__label {
+  cursor: not-allowed;
+}
+.navds-select__input {
+  appearance: none;
+  background-color: var(--ac-select-bg, var(--a-surface-default));
+  border-radius: var(--a-border-radius-medium);
+  border: 1px solid var(--ac-select-border, var(--a-border-default));
+  color: var(--ac-select-text, var(--a-text-default));
+  width: 100%;
+  box-sizing: border-box;
+  min-height: 48px;
+  display: inline-block;
+  position: relative;
+  padding: 0.5rem;
+  padding-right: 2rem;
+}
+.navds-select__input:hover {
+  border-color: var(--ac-select-hover-bg, var(--a-border-action));
+}
+.navds-select__input:focus {
+  outline: none;
+  box-shadow: var(--a-shadow-focus);
+}
+.navds-select__container {
+  position: relative;
+  display: flex;
+  width: 100%;
+  color: var(--a-text-default);
+}
+.navds-select__chevron {
+  position: absolute;
+  font-size: 1rem;
+  right: 0.5rem;
+  pointer-events: none;
+  align-self: center;
+}
+.navds-form-field--small .navds-select__input {
+  min-height: 32px;
+  padding: 0 2rem 0 0.25rem;
+}
+/**
+  Error handling
+*/
+.navds-select--error > * select:not(:hover):not(:focus):not(:disabled) {
+  box-shadow: 0 0 0 1px var(--ac-select-error-border, var(--a-surface-danger));
+  border-color: var(--ac-select-error-border, var(--a-surface-danger));
+}
+/**
+  Disabled
+*/
+.navds-select__input:disabled {
+  background-color: var(--ac-select-bg, var(--a-surface-default));
+  border: 1px solid var(--ac-select-border, var(--a-border-default));
+  box-shadow: none;
+  cursor: not-allowed;
+
+  /* Chrome-fix */
+  opacity: 1;
+  color: var(--a-text-default);
+}
+/* Chrome-fix */
+.navds-select__input:disabled > option {
+  color: var(--a-text-default);
+}
+.navds-switch {
+  position: relative;
+  min-height: 48px;
+  width: fit-content;
+}
+.navds-switch--right {
+  width: auto;
+}
+.navds-switch--small {
+  position: relative;
+  min-height: 32px;
+}
+/* Input */
+.navds-switch__input {
+  cursor: pointer;
+  position: absolute;
+  z-index: 1;
+  width: 48px;
+  height: 48px;
+  opacity: 0;
+  top: 0;
+}
+.navds-switch--small > .navds-switch__input {
+  height: 32px;
+  top: 0;
+}
+/* Label */
+.navds-switch__label-wrapper {
+  cursor: pointer;
+  color: var(--a-text-default);
+}
+.navds-switch__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--a-spacing-1);
+  padding: 0.75rem 0 0.75rem 3.25rem;
+}
+.navds-switch--right > .navds-switch__label-wrapper > .navds-switch__content {
+  padding: 0.75rem 3.25rem 0.75rem 0;
+}
+.navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
+  padding: calc(var(--a-spacing-2) - 2px) 0 calc(var(--a-spacing-2) - 2px) 3.25rem;
+}
+.navds-switch--right.navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
+  padding: calc(var(--a-spacing-2) - 2px) 3.25rem calc(var(--a-spacing-2) - 2px) 0;
+}
+.navds-switch--with-description,
+.navds-switch--small > .navds-switch__label-wrapper > .navds-switch--with-description {
+  padding-bottom: 0;
+}
+.navds-switch__input:hover ~ .navds-switch__label-wrapper,
+.navds-switch__label-wrapper:hover {
+  color: var(--ac-switch-action, var(--a-surface-action));
+}
+.navds-switch__input:disabled:hover ~ .navds-switch__label-wrapper {
+  color: inherit;
+}
+/* Track */
+.navds-switch__track {
+  width: 44px;
+  height: 24px;
+  background-color: var(--ac-switch-bg, var(--a-surface-neutral));
+  position: absolute;
+  top: var(--a-spacing-3);
+  left: 0;
+  border-radius: var(--a-border-radius-medium);
+  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.navds-switch--small > .navds-switch__track {
+  top: var(--a-spacing-1);
+}
+.navds-switch--right > .navds-switch__input,
+.navds-switch--right > .navds-switch__track {
+  right: 0;
+  left: auto;
+}
+.navds-switch__input:checked ~ .navds-switch__track {
+  background-color: var(--ac-switch-checked-bg, var(--a-surface-success));
+}
+.navds-switch__input:hover ~ .navds-switch__track {
+  background-color: var(--ac-switch-hover-bg, var(--a-surface-neutral-hover));
+}
+.navds-switch__input:hover:checked ~ .navds-switch__track {
+  background-color: var(--ac-switch-checked-hover-bg, var(--a-surface-success-hover));
+}
+.navds-switch__input:disabled ~ .navds-switch__track {
+  background-color: var(--ac-switch-bg, var(--a-surface-neutral));
+}
+.navds-switch__input:checked:disabled ~ .navds-switch__track {
+  background-color: var(--ac-switch-checked-bg, var(--a-border-success));
+}
+.navds-switch__input:focus ~ .navds-switch__track {
+  box-shadow: 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+}
+/* Thumb */
+.navds-switch__thumb {
+  background-color: var(--ac-switch-thumb-bg, var(--a-surface-default));
+  color: var(--ac-switch-thumb-icon, var(--a-icon-subtle));
+  border-radius: var(--a-border-radius-small);
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  transform: translateX(0);
+  left: 2px;
+  top: 2px;
+  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
+  transform: translateX(20px);
+  color: var(--ac-switch-thumb-icon-checked, var(--a-icon-success));
+}
+@media (hover: hover) and (pointer: fine) {
+  .navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
+    transform: translateX(2px);
+  }
+
+  .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
+    transform: translateX(18px);
+  }
+}
+.navds-switch__input:disabled:hover ~ .navds-switch__track > .navds-switch__thumb {
+  transform: translateX(0);
+}
+.navds-switch__input:checked:disabled:hover ~ .navds-switch__track > .navds-switch__thumb {
+  transform: translateX(20px);
+}
+/* Loader */
+.navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb .navds-loader__foreground {
+  stroke: var(--ac-switch-thumb-icon-checked, var(--a-icon-success));
+}
+/* Disabled */
+.navds-switch__input:disabled {
+  appearance: none;
+}
+.navds-switch--disabled:not(.navds-switch--loading) {
+  opacity: 0.3;
+}
+.navds-switch__input:disabled,
+.navds-switch__input:disabled ~ .navds-switch__label-wrapper {
+  cursor: not-allowed;
+}
+[data-theme="dark"] {
+  --ac-textfield-text: var(--a-text-on-inverted);
+  --ac-textfield-bg: var(--a-surface-inverted);
+  --ac-textfield-border: var(--a-border-on-inverted);
+  --ac-textfield-hover-border: var(--a-blue-200);
+  --ac-textfield-placeholder: var(--a-gray-500);
+  --ac-textfield-error-border: var(--a-red-300);
+  --ac-textarea-text: var(--a-text-on-inverted);
+  --ac-textarea-bg: var(--a-transparent);
+  --ac-textarea-border: var(--a-border-on-inverted);
+  --ac-textarea-hover-border: var(--a-blue-200);
+  --ac-textarea-placeholder: var(--a-gray-500);
+  --ac-textarea-error-border: var(--a-red-300);
+  --ac-textarea-counter-text: var(--a-gray-300);
+  --ac-textarea-counter-error-text: var(--a-red-300);
+  --ac-search-button-border: var(--a-border-on-inverted);
+  --ac-search-button-border-hover: var(--a-blue-200);
+  --ac-search-clear-icon: var(--a-white);
+  --ac-search-clear-icon-hover: var(--a-blue-200);
+  --ac-search-error-border: var(--a-red-300);
+}
+.navds-text-field__input {
+  appearance: none;
+  padding: var(--a-spacing-2);
+  background-color: var(--ac-textfield-bg, var(--a-surface-default));
+  border-radius: var(--a-border-radius-medium);
+  border: 1px solid var(--ac-textfield-border, var(--a-border-default));
+  min-height: 48px;
+  width: 100%;
+  color: var(--ac-textfield-text, var(--a-text-default));
+}
+.navds-text-field__input[size] {
+  width: auto;
+}
+.navds-text-field__input::placeholder {
+  color: var(--ac-textfield-placeholder, var(--a-text-subtle));
+}
+.navds-form-field--small .navds-text-field__input {
+  padding: 0 0.5rem;
+  min-height: 32px;
+}
+.navds-text-field__input:hover {
+  border-color: var(--ac-textfield-hover-border, var(--a-border-action));
+}
+.navds-text-field__input:focus {
+  outline: none;
+  box-shadow: var(--a-shadow-focus);
+}
+/**
+  Error handling
+*/
+.navds-text-field--error > .navds-text-field__input:not(:hover):not(:disabled) {
+  border-color: var(--ac-textfield-error-border, var(--a-border-danger));
+  box-shadow: 0 0 0 1px var(--ac-textfield-error-border, var(--a-border-danger));
+}
+.navds-text-field--error > .navds-text-field__input:focus:not(:hover):not(:disabled) {
+  box-shadow: 0 0 0 1px var(--a-border-danger), var(--a-shadow-focus);
+}
+/* Disabled handling */
+.navds-text-field__input:disabled {
+  background-color: var(--ac-textfield-bg, var(--a-surface-default));
+  border-color: var(--ac-textfield-border, var(--a-border-default));
+  box-shadow: none;
+  cursor: not-allowed;
+}
+.navds-text-field__input[readonly] {
+  background-color: var(--ac-textfield-bg, var(--a-surface-default));
+  border-color: var(--ac-textfield-border, var(--a-border-default));
+  box-shadow: none;
+  cursor: not-allowed;
+}
+/**
+  * Removes default search icon
+  */
+.navds-text-field__input[type="search"]::-webkit-search-decoration,
+.navds-text-field__input[type="search"]::-webkit-search-cancel-button,
+.navds-text-field__input[type="search"]::-webkit-search-results-button,
+.navds-text-field__input[type="search"]::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+}
+.navds-textarea__wrapper {
+  position: relative;
+  width: 100%;
+}
+.navds-textarea__input {
+  appearance: none;
+  padding: var(--a-spacing-2);
+  background-color: var(--ac-textarea-bg, var(--a-surface-default));
+  border-radius: var(--a-border-radius-medium);
+  border: 1px solid var(--ac-textarea-border, var(--a-border-default));
+  resize: none;
+  width: 100%;
+  display: block;
+  color: var(--ac-textarea-text, var(--a-text-default));
+}
+.navds-textarea--counter {
+  padding-bottom: var(--a-spacing-8);
+}
+.navds-textarea__input::placeholder {
+  color: var(--ac-textarea-placeholder, var(--a-text-subtle));
+}
+.navds-textarea__input:hover {
+  border-color: var(--ac-textarea-hover-border, var(--a-border-action));
+}
+.navds-textarea__input:focus {
+  outline: none;
+  box-shadow: var(--a-shadow-focus);
+}
+.navds-form-field--small .navds-textarea__input {
+  padding: 6px;
+}
+.navds-form-field--small .navds-textarea--counter.navds-textarea__input {
+  padding-bottom: var(--a-spacing-7);
+}
+.navds-textarea__counter {
+  pointer-events: none;
+  color: var(--ac-textarea-counter-text, var(--a-text-subtle));
+  font-style: italic;
+  position: absolute;
+  text-align: left;
+  left: 1px;
+  bottom: 1px;
+  padding: var(--a-spacing-1) var(--a-spacing-2);
+}
+.navds-textarea__counter--error {
+  color: var(--ac-textarea-counter-error-text, var(--a-text-danger));
+}
+.navds-textarea--resize .navds-textarea__input {
+  resize: both;
+}
+/**
+  Error handling
+*/
+.navds-textarea--error .navds-textarea__input:not(:hover):not(:focus):not(:disabled) {
+  box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--a-border-danger));
+  border-color: var(--ac-textarea-error-border, var(--a-border-danger));
+}
+.navds-textarea__input:disabled {
+  background-color: var(--ac-textarea-bg, var(--a-surface-default));
+  border-color: var(--ac-textarea-border, var(--a-border-default));
+  box-shadow: none;
+  cursor: not-allowed;
+}
+.navds-textarea__input[readonly] {
+  background-color: var(--ac-textarea-bg, var(--a-surface-default));
+  border-color: var(--ac-textarea-border, var(--a-border-default));
+  box-shadow: none;
+  cursor: not-allowed;
+}
+.navds-search {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.navds-search__wrapper-inner {
+  position: relative;
+  width: 100%;
+}
+.navds-search__wrapper {
+  display: inline-flex;
+  align-items: center;
+}
+.navds-search__input {
+  padding-right: var(--a-spacing-10);
+}
+.navds-form-field--small .navds-search__input {
+  padding-right: var(--a-spacing-8);
+}
+.navds-search__input--simple {
+  padding-left: var(--a-spacing-11);
+}
+.navds-form-field--small .navds-search__input--simple {
+  padding-left: var(--a-spacing-7);
+}
+.navds-search__input:not(.navds-search__input--simple) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.navds-search__search-icon {
+  position: absolute;
+  left: var(--a-spacing-3);
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  font-size: 1.5rem;
+}
+.navds-form-field--small .navds-search__search-icon {
+  left: var(--a-spacing-2);
+  font-size: 1rem;
+}
+.navds-search__button-clear {
+  position: absolute;
+  right: 0.75rem;
+  border-radius: var(--a-border-radius-medium);
+  color: var(--ac-search-clear-icon, var(--a-text-default));
+  height: 32px;
+  width: 32px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  background: none;
+  border: none;
+  font-size: 1rem;
+  padding: 0;
+}
+.navds-form-field--small .navds-search__button-clear {
+  right: 0.5rem;
+  height: 24px;
+  width: 24px;
+}
+.navds-search__button-clear:hover {
+  color: var(--ac-search-clear-icon-hover, var(--a-text-action));
+}
+.navds-search__button-clear:focus {
+  box-shadow: var(--a-shadow-focus);
+  outline: none;
+}
+.navds-search__button-search {
+  flex-shrink: 0;
+  min-width: 64px;
+  min-height: 32px;
+  border-radius: 0;
+  border-top-right-radius: var(--a-border-radius-medium);
+  border-bottom-right-radius: var(--a-border-radius-medium);
+}
+.navds-form-field--small .navds-search__button-search svg {
+  font-size: 1rem;
+}
+.navds-form-field--small .navds-search__button-search {
+  min-width: 40px;
+}
+.navds-search__button-search.navds-button--secondary {
+  box-shadow: -1px 0 0 0 var(--ac-search-button-border, var(--a-border-default)) inset,
+    0 1px 0 0 var(--ac-search-button-border, var(--a-border-default)) inset,
+    0 -1px 0 0 var(--ac-search-button-border, var(--a-border-default)) inset;
+}
+.navds-search__button-search.navds-button--secondary:hover {
+  box-shadow: -1px 0 0 0 var(--ac-search-button-border-hover, var(--a-border-action)) inset,
+    0 1px 0 0 var(--ac-search-button-border-hover, var(--a-border-action)) inset,
+    0 -1px 0 0 var(--ac-search-button-border-hover, var(--a-border-action)) inset,
+    -1px 0 0 0 var(--ac-search-button-border-hover, var(--a-border-action));
+  z-index: 1;
+}
+.navds-search__wrapper-inner:focus-within + .navds-search__button-search.navds-button--secondary:hover {
+  z-index: auto;
+}
+.navds-search__button-search.navds-button--secondary:focus {
+  box-shadow: 0 0 0 1px var(--ac-search-button-border, var(--a-border-default)) inset, var(--a-shadow-focus);
+}
+.navds-search__button-search.navds-button--secondary:focus:hover {
+  box-shadow: 0 0 0 1px var(--ac-search-button-border-hover, var(--a-border-action)) inset, var(--a-shadow-focus);
+}
+.navds-search__button-search.navds-button--secondary:focus:active {
+  box-shadow: 0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset, var(--a-shadow-focus);
+}
+/* Error-handling */
+.navds-search--error .navds-search__input:not(:hover):not(:disabled) {
+  border-color: var(--ac-search-error-border, var(--a-border-danger));
+  box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--a-border-danger));
+}
+.navds-search--error .navds-search__input:focus:not(:hover):not(:disabled) {
+  box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+}
+/* Focus layering */
+.navds-search__input:focus,
+.navds-search__button-clear,
+.navds-search__button-search:focus {
+  z-index: 1;
+}