@fremtind/jokul 0.8.1 → 0.10.0

package/src/components/text-input/styles/text-input.css

@@ -0,0 +1,513 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 Sep 2024 08:51:40 GMT
+ */
+@media screen and (prefers-color-scheme: light) {
+  :root {
+    --jkl-text-input-border-color: #636060;
+    --jkl-text-input-text-color: #1b1917;
+    --jkl-text-input-placeholder-color: #636060;
+    --jkl-text-input-unit-color: #1b1917;
+    --jkl-text-input-background-color: #ffffff;
+    --jkl-text-input-focus-color: #1b1917;
+    --jkl-text-input-error-background-color: #f6b3b3;
+    --jkl-text-input-error-text-color: #1b1917;
+    --jkl-text-input-error-placeholder-color: #636060;
+    --jkl-text-input-selection-color: rgba(27, 25, 23, 0.2);
+    --jkl-text-input-error-selection-color: rgba(27, 25, 23, 0.2);
+    --jkl-text-area-counter-count-color: #636060;
+  }
+}
+[data-theme=light] {
+  --jkl-text-input-border-color: #636060;
+  --jkl-text-input-text-color: #1b1917;
+  --jkl-text-input-placeholder-color: #636060;
+  --jkl-text-input-unit-color: #1b1917;
+  --jkl-text-input-background-color: #ffffff;
+  --jkl-text-input-focus-color: #1b1917;
+  --jkl-text-input-error-background-color: #f6b3b3;
+  --jkl-text-input-error-text-color: #1b1917;
+  --jkl-text-input-error-placeholder-color: #636060;
+  --jkl-text-input-selection-color: rgba(27, 25, 23, 0.2);
+  --jkl-text-input-error-selection-color: rgba(27, 25, 23, 0.2);
+  --jkl-text-area-counter-count-color: #636060;
+}
+
+@media screen and (prefers-color-scheme: dark) {
+  :root {
+    --jkl-text-input-border-color: #c8c5c3;
+    --jkl-text-input-text-color: #f9f9f9;
+    --jkl-text-input-placeholder-color: #c8c5c3;
+    --jkl-text-input-unit-color: #f9f9f9;
+    --jkl-text-input-background-color: #313030;
+    --jkl-text-input-focus-color: #f9f9f9;
+    --jkl-text-input-selection-color: rgba(249, 249, 249, 0.25);
+    --jkl-text-input-error-background-color: #f6b3b3;
+    --jkl-text-input-error-text-color: #1b1917;
+    --jkl-text-input-error-placeholder-color: #636060;
+    --jkl-text-input-error-selection-color: rgba(27, 25, 23, 0.2);
+    --jkl-text-area-counter-count-color: #c8c5c3;
+  }
+}
+[data-theme=dark] {
+  --jkl-text-input-border-color: #c8c5c3;
+  --jkl-text-input-text-color: #f9f9f9;
+  --jkl-text-input-placeholder-color: #c8c5c3;
+  --jkl-text-input-unit-color: #f9f9f9;
+  --jkl-text-input-background-color: #313030;
+  --jkl-text-input-focus-color: #f9f9f9;
+  --jkl-text-input-selection-color: rgba(249, 249, 249, 0.25);
+  --jkl-text-input-error-background-color: #f6b3b3;
+  --jkl-text-input-error-text-color: #1b1917;
+  --jkl-text-input-error-placeholder-color: #636060;
+  --jkl-text-input-error-selection-color: rgba(27, 25, 23, 0.2);
+  --jkl-text-area-counter-count-color: #c8c5c3;
+}
+
+:root,
+[data-layout-density=comfortable],
+[data-density=comfortable] {
+  --jkl-text-input-font-size: var(--jkl-body-font-size);
+  --jkl-text-input-line-height: var(--jkl-body-line-height);
+  --jkl-text-input-font-weight: var(--jkl-body-font-weight);
+  --jkl-text-input-height: 3rem;
+  --jkl-text-input-vertical-padding: 0.5rem;
+  --jkl-text-input-horizontal-padding: 0.75rem;
+  --jkl-text-input-padding: var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);
+  --jkl-text-input-action-button-size: 3rem;
+  --jkl-text-input-action-button-icon-size: 1.25rem;
+  --jkl-text-input-action-button-padding: 0.5rem 0;
+  --jkl-text-input-action-button-focus-position: 0.5rem;
+}
+@media (width >= 0) and (max-width: 679px) {
+  :root,
+  [data-layout-density=comfortable],
+  [data-density=comfortable] {
+    --jkl-text-input-height: 2.75rem;
+    --jkl-text-input-action-button-size: 2.75rem;
+  }
+}
+
+[data-layout-density=compact],
+[data-density=compact] {
+  --jkl-text-input-font-size: var(--jkl-small-font-size);
+  --jkl-text-input-line-height: var(--jkl-small-line-height);
+  --jkl-text-input-font-weight: var(--jkl-small-font-weight);
+  --jkl-text-input-height: 2rem;
+  --jkl-text-input-vertical-padding: 0.25rem;
+  --jkl-text-input-horizontal-padding: 0.5rem;
+  --jkl-text-input-padding: var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);
+  --jkl-text-input-action-button-size: 2rem;
+  --jkl-text-input-action-button-icon-size: 1.125rem;
+  --jkl-text-input-action-button-padding: 0;
+  --jkl-text-input-action-button-focus-position: 0;
+}
+
+.jkl-text-input-action-button {
+  flex-shrink: 0;
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  cursor: pointer;
+  padding: var(--jkl-text-input-action-button-padding);
+  height: var(--jkl-text-input-action-button-size);
+  width: var(--jkl-text-input-action-button-size);
+  color: var(--jkl-text-input-border-color);
+  margin-inline-start: calc(var(--jkl-text-input-horizontal-padding) * -1);
+  outline: 0;
+  border-style: none;
+  outline-style: none;
+}
+.jkl-text-input-action-button:active, .jkl-text-input-action-button:hover, .jkl-text-input-action-button:focus {
+  outline: 0;
+  outline-style: none;
+}
+@media screen and (forced-colors: active) {
+  .jkl-text-input-action-button {
+    outline: revert;
+    border-style: revert;
+    outline-style: revert;
+  }
+  .jkl-text-input-action-button:active, .jkl-text-input-action-button:hover, .jkl-text-input-action-button:focus {
+    outline: revert;
+    outline-style: revert;
+  }
+}
+.jkl-text-input-action-button .jkl-icon-button__icon {
+  height: var(--jkl-text-input-action-button-icon-size);
+  width: var(--jkl-text-input-action-button-icon-size);
+}
+.jkl-text-input-action-button:hover {
+  color: var(--jkl-text-input-focus-color);
+}
+@media screen and (forced-colors: active) {
+  .jkl-text-input-action-button:hover {
+    border: 0.125rem inset ButtonText;
+  }
+}
+html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-action-button:focus {
+  position: relative;
+}
+html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-action-button:focus::after {
+  content: "";
+  position: absolute;
+  inset: var(--jkl-text-input-action-button-focus-position) var(--jkl-text-input-action-button-focus-position) var(--jkl-text-input-action-button-focus-position) var(--jkl-text-input-action-button-focus-position);
+  box-shadow: inset 0 0 0 0.125rem var(--jkl-text-input-focus-color);
+}
+
+@media screen and (forced-colors: active) {
+  .jkl-text-input-action-button {
+    border: revert;
+    background-color: revert;
+  }
+}
+@media screen and (forced-colors: active) {
+  .jkl-text-input-action-button {
+    stroke: ButtonText;
+  }
+  .jkl-text-input-action-button svg, .jkl-text-input-action-button path {
+    stroke: ButtonText;
+  }
+}
+
+.jkl-text-input-wrapper {
+  border-radius: 0.1875rem;
+  box-sizing: border-box;
+  max-width: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: var(--jkl-text-input-height);
+  font-size: var(--jkl-text-input-font-size);
+  line-height: var(--jkl-text-input-line-height);
+  font-weight: var(--jkl-text-input-font-weight);
+  transition-timing-function: ease;
+  transition-duration: 150ms;
+  transition-property: color, box-shadow, background-color;
+  color: var(--jkl-text-input-text-color);
+  box-shadow: inset 0 0 0 0.0625rem var(--jkl-text-input-border-color), 0 0 0 0.0625rem transparent;
+  background-color: transparent;
+}
+.jkl-text-input-wrapper:hover {
+  box-shadow: inset 0 0 0 0.0625rem var(--jkl-text-input-focus-color), 0 0 0 0.0625rem var(--jkl-text-input-focus-color);
+  border-color: var(--jkl-text-input-focus-color);
+}
+.jkl-text-input-wrapper:focus-within {
+  background-color: var(--jkl-text-input-background-color);
+  box-shadow: inset 0 0 0 0.0625rem var(--jkl-text-input-focus-color), 0 0 0 0.0625rem var(--jkl-text-input-focus-color);
+  border-color: var(--jkl-text-input-focus-color);
+}
+.jkl-text-input-wrapper[data-invalid=true] {
+  background-color: var(--jkl-text-input-error-background-color);
+  color: var(--jkl-text-input-error-text-color);
+}
+
+.jkl-text-input {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.jkl-text-input__input {
+  padding: var(--jkl-text-input-padding);
+  width: 100%;
+  background: none;
+  -webkit-appearance: none;
+  color: var(--jkl-color);
+  font-size: var(--jkl-text-input-font-size);
+  line-height: var(--jkl-text-input-line-height);
+  font-weight: var(--jkl-text-input-font-weight);
+  outline: 0;
+  border-style: none;
+  outline-style: none;
+}
+.jkl-text-input__input:active, .jkl-text-input__input:hover, .jkl-text-input__input:focus {
+  outline: 0;
+  outline-style: none;
+}
+@media screen and (forced-colors: active) {
+  .jkl-text-input__input {
+    outline: revert;
+    border-style: revert;
+    outline-style: revert;
+  }
+  .jkl-text-input__input:active, .jkl-text-input__input:hover, .jkl-text-input__input:focus {
+    outline: revert;
+    outline-style: revert;
+  }
+}
+.jkl-text-input__input input[type=number]::-webkit-outer-spin-button,
+.jkl-text-input__input input[type=number]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+.jkl-text-input__input input[type=number] {
+  -moz-appearance: textfield;
+}
+.jkl-text-input__input::placeholder {
+  opacity: 1;
+  color: var(--jkl-text-input-placeholder-color);
+}
+.jkl-text-input__input::selection {
+  background-color: var(--jkl-text-input-selection-color);
+}
+[data-theme=dark] .jkl-text-input__input::selection {
+  background-color: var(--jkl-text-input-selection-color);
+}
+.jkl-text-input__input[aria-invalid=true] {
+  color: var(--jkl-text-input-error-text-color);
+}
+.jkl-text-input__input[aria-invalid=true]::placeholder {
+  color: var(--jkl-text-input-error-placeholder-color);
+}
+.jkl-text-input__input[aria-invalid=true]::selection {
+  background-color: var(--jkl-text-input-error-selection-color);
+}
+.jkl-text-input__input[aria-invalid=true] ~ .jkl-text-input-action-button {
+  color: var(--jkl-text-input-error-placeholder-color);
+}
+.jkl-text-input__input[aria-invalid=true] ~ .jkl-text-input-action-button:hover {
+  color: var(--jkl-text-input-error-text-color);
+}
+html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input__input[aria-invalid=true] ~ .jkl-text-input-action-button:focus::after {
+  box-shadow: inset 0 0 0 0.125rem var(--jkl-text-input-error-text-color);
+}
+
+.jkl-text-input__input[aria-invalid=true] ~ .jkl-text-input__unit {
+  color: var(--jkl-text-input-error-text-color);
+}
+.jkl-text-input__input--align-right {
+  text-align: right;
+}
+.jkl-text-input__unit {
+  padding-inline-end: var(--jkl-text-input-horizontal-padding);
+  padding-block: var(--jkl-text-input-vertical-padding);
+  color: var(--jkl-text-input-unit-color);
+}
+.jkl-text-input__action-button {
+  margin-inline-start: calc(var(--jkl-text-input-horizontal-padding) * -1);
+}
+.jkl-text-input--inline {
+  display: inline-block;
+  vertical-align: middle;
+  margin: -0.125rem 0.25rem;
+}
+
+.jkl-text-area {
+  height: auto;
+  width: 100%;
+}
+.jkl-text-area__text-area {
+  scrollbar-color: var(--jkl-color) transparent;
+  box-sizing: border-box;
+  resize: none;
+  width: 100%;
+  padding: var(--jkl-text-input-padding);
+  max-height: var(--jkl-text-input-height);
+  height: var(--jkl-text-input-height);
+  min-height: var(--jkl-text-input-height);
+  transition-timing-function: ease;
+  transition-duration: 150ms;
+  transition-property: height, min-height, max-height, padding;
+  background: none;
+  -webkit-appearance: none;
+  color: var(--jkl-color);
+  font-size: var(--jkl-text-input-font-size);
+  line-height: var(--jkl-text-input-line-height);
+  font-weight: var(--jkl-text-input-font-weight);
+  outline: 0;
+  border-style: none;
+  outline-style: none;
+}
+.jkl-text-area__text-area:active, .jkl-text-area__text-area:hover, .jkl-text-area__text-area:focus {
+  outline: 0;
+  outline-style: none;
+}
+@media screen and (forced-colors: active) {
+  .jkl-text-area__text-area {
+    outline: revert;
+    border-style: revert;
+    outline-style: revert;
+  }
+  .jkl-text-area__text-area:active, .jkl-text-area__text-area:hover, .jkl-text-area__text-area:focus {
+    outline: revert;
+    outline-style: revert;
+  }
+}
+.jkl-text-area__text-area input[type=number]::-webkit-outer-spin-button,
+.jkl-text-area__text-area input[type=number]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+.jkl-text-area__text-area input[type=number] {
+  -moz-appearance: textfield;
+}
+.jkl-text-area__text-area::placeholder {
+  opacity: 1;
+  color: var(--jkl-text-input-placeholder-color);
+}
+.jkl-text-area__text-area::selection {
+  background-color: var(--jkl-text-input-selection-color);
+}
+[data-theme=dark] .jkl-text-area__text-area::selection {
+  background-color: var(--jkl-text-input-selection-color);
+}
+.jkl-text-area__text-area[aria-invalid=true] {
+  color: var(--jkl-text-input-error-text-color);
+}
+.jkl-text-area__text-area[aria-invalid=true]::placeholder {
+  color: var(--jkl-text-input-error-placeholder-color);
+}
+.jkl-text-area__text-area[aria-invalid=true]::selection {
+  background-color: var(--jkl-text-input-error-selection-color);
+}
+.jkl-text-area__text-area[aria-invalid=true] ~ .jkl-text-input-action-button {
+  color: var(--jkl-text-input-error-placeholder-color);
+}
+.jkl-text-area__text-area[aria-invalid=true] ~ .jkl-text-input-action-button:hover {
+  color: var(--jkl-text-input-error-text-color);
+}
+html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area__text-area[aria-invalid=true] ~ .jkl-text-input-action-button:focus::after {
+  box-shadow: inset 0 0 0 0.125rem var(--jkl-text-input-error-text-color);
+}
+
+.jkl-text-area__text-area[aria-invalid=true] ~ .jkl-text-input__unit {
+  color: var(--jkl-text-input-error-text-color);
+}
+.jkl-text-area .jkl-text-input-wrapper {
+  height: auto;
+  max-height: 100%;
+}
+.jkl-text-area--start-open .jkl-text-input-wrapper {
+  max-height: 100%;
+}
+.jkl-text-area--auto-expand .jkl-text-area__text-area {
+  overflow: hidden;
+}
+.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-input-wrapper {
+  position: relative;
+}
+.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-input-wrapper[data-has-content=true], .jkl-text-area:has(.jkl-text-area__counter) .jkl-text-input-wrapper:focus-within {
+  padding-bottom: calc(var(--jkl-text-input-height) + 0.25rem);
+}
+.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter {
+  transition-timing-function: ease;
+  transition-duration: 150ms;
+  transition-property: opacity;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-count {
+  padding: var(--jkl-text-input-padding);
+  color: var(--jkl-text-area-counter-count-color);
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 400;
+  --jkl-icon-weight: 300;
+}
+.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-progress {
+  background-color: transparent;
+  height: 0.25rem;
+  width: 100%;
+  overflow: hidden;
+}
+.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-progress::after {
+  content: "";
+  width: var(--progress-width, 100%);
+  display: block;
+  height: 0.25rem;
+  background-color: var(--jkl-color);
+  transition-property: width;
+  transition-timing-function: ease;
+  transition-duration: 400ms;
+}
+.jkl-text-area:has(.jkl-text-area__counter):focus-within .jkl-text-area__counter {
+  opacity: 1;
+  transition-delay: 150ms;
+}
+.jkl-text-area:has(.jkl-text-area__counter) [aria-invalid=true] ~ .jkl-text-area__counter {
+  color: var(--jkl-text-input-error-text-color);
+}
+
+.jkl-text-area__text-area--3-rows:focus,
+.jkl-text-area__text-area--3-rows:not(:placeholder-shown),
+.jkl-text-area--start-open .jkl-text-area__text-area--3-rows {
+  --height: calc(var(--jkl-text-input-line-height) * 3);
+  --vertical-padding: calc(var(--jkl-text-input-vertical-padding) * 2);
+  min-height: calc(var(--height) + var(--vertical-padding));
+  height: calc(var(--height) + var(--vertical-padding));
+  max-height: 100%;
+}
+
+.jkl-text-area__text-area--4-rows:focus,
+.jkl-text-area__text-area--4-rows:not(:placeholder-shown),
+.jkl-text-area--start-open .jkl-text-area__text-area--4-rows {
+  --height: calc(var(--jkl-text-input-line-height) * 4);
+  --vertical-padding: calc(var(--jkl-text-input-vertical-padding) * 2);
+  min-height: calc(var(--height) + var(--vertical-padding));
+  height: calc(var(--height) + var(--vertical-padding));
+  max-height: 100%;
+}
+
+.jkl-text-area__text-area--5-rows:focus,
+.jkl-text-area__text-area--5-rows:not(:placeholder-shown),
+.jkl-text-area--start-open .jkl-text-area__text-area--5-rows {
+  --height: calc(var(--jkl-text-input-line-height) * 5);
+  --vertical-padding: calc(var(--jkl-text-input-vertical-padding) * 2);
+  min-height: calc(var(--height) + var(--vertical-padding));
+  height: calc(var(--height) + var(--vertical-padding));
+  max-height: 100%;
+}
+
+.jkl-text-area__text-area--6-rows:focus,
+.jkl-text-area__text-area--6-rows:not(:placeholder-shown),
+.jkl-text-area--start-open .jkl-text-area__text-area--6-rows {
+  --height: calc(var(--jkl-text-input-line-height) * 6);
+  --vertical-padding: calc(var(--jkl-text-input-vertical-padding) * 2);
+  min-height: calc(var(--height) + var(--vertical-padding));
+  height: calc(var(--height) + var(--vertical-padding));
+  max-height: 100%;
+}
+
+.jkl-text-area__text-area--7-rows:focus,
+.jkl-text-area__text-area--7-rows:not(:placeholder-shown),
+.jkl-text-area--start-open .jkl-text-area__text-area--7-rows {
+  --height: calc(var(--jkl-text-input-line-height) * 7);
+  --vertical-padding: calc(var(--jkl-text-input-vertical-padding) * 2);
+  min-height: calc(var(--height) + var(--vertical-padding));
+  height: calc(var(--height) + var(--vertical-padding));
+  max-height: 100%;
+}
+
+.jkl-text-area__text-area--8-rows:focus,
+.jkl-text-area__text-area--8-rows:not(:placeholder-shown),
+.jkl-text-area--start-open .jkl-text-area__text-area--8-rows {
+  --height: calc(var(--jkl-text-input-line-height) * 8);
+  --vertical-padding: calc(var(--jkl-text-input-vertical-padding) * 2);
+  min-height: calc(var(--height) + var(--vertical-padding));
+  height: calc(var(--height) + var(--vertical-padding));
+  max-height: 100%;
+}
+
+.jkl-text-area__text-area--9-rows:focus,
+.jkl-text-area__text-area--9-rows:not(:placeholder-shown),
+.jkl-text-area--start-open .jkl-text-area__text-area--9-rows {
+  --height: calc(var(--jkl-text-input-line-height) * 9);
+  --vertical-padding: calc(var(--jkl-text-input-vertical-padding) * 2);
+  min-height: calc(var(--height) + var(--vertical-padding));
+  height: calc(var(--height) + var(--vertical-padding));
+  max-height: 100%;
+}
+
+.jkl-text-area__text-area--10-rows:focus,
+.jkl-text-area__text-area--10-rows:not(:placeholder-shown),
+.jkl-text-area--start-open .jkl-text-area__text-area--10-rows {
+  --height: calc(var(--jkl-text-input-line-height) * 10);
+  --vertical-padding: calc(var(--jkl-text-input-vertical-padding) * 2);
+  min-height: calc(var(--height) + var(--vertical-padding));
+  height: calc(var(--height) + var(--vertical-padding));
+  max-height: 100%;
+}

package/src/components/text-input/styles/text-input.min.css

@@ -0,0 +1 @@
+@media screen and (prefers-color-scheme:light){:root{--jkl-text-input-border-color:#636060;--jkl-text-input-text-color:#1b1917;--jkl-text-input-placeholder-color:#636060;--jkl-text-input-unit-color:#1b1917;--jkl-text-input-background-color:#fff;--jkl-text-input-focus-color:#1b1917;--jkl-text-input-error-background-color:#f6b3b3;--jkl-text-input-error-text-color:#1b1917;--jkl-text-input-error-placeholder-color:#636060;--jkl-text-input-selection-color:#1b191733;--jkl-text-input-error-selection-color:#1b191733;--jkl-text-area-counter-count-color:#636060}}[data-theme=light]{--jkl-text-input-border-color:#636060;--jkl-text-input-text-color:#1b1917;--jkl-text-input-placeholder-color:#636060;--jkl-text-input-unit-color:#1b1917;--jkl-text-input-background-color:#fff;--jkl-text-input-focus-color:#1b1917;--jkl-text-input-error-background-color:#f6b3b3;--jkl-text-input-error-text-color:#1b1917;--jkl-text-input-error-placeholder-color:#636060;--jkl-text-input-selection-color:#1b191733;--jkl-text-input-error-selection-color:#1b191733;--jkl-text-area-counter-count-color:#636060}@media screen and (prefers-color-scheme:dark){:root{--jkl-text-input-border-color:#c8c5c3;--jkl-text-input-text-color:#f9f9f9;--jkl-text-input-placeholder-color:#c8c5c3;--jkl-text-input-unit-color:#f9f9f9;--jkl-text-input-background-color:#313030;--jkl-text-input-focus-color:#f9f9f9;--jkl-text-input-selection-color:#f9f9f940;--jkl-text-input-error-background-color:#f6b3b3;--jkl-text-input-error-text-color:#1b1917;--jkl-text-input-error-placeholder-color:#636060;--jkl-text-input-error-selection-color:#1b191733;--jkl-text-area-counter-count-color:#c8c5c3}}[data-theme=dark]{--jkl-text-input-border-color:#c8c5c3;--jkl-text-input-text-color:#f9f9f9;--jkl-text-input-placeholder-color:#c8c5c3;--jkl-text-input-unit-color:#f9f9f9;--jkl-text-input-background-color:#313030;--jkl-text-input-focus-color:#f9f9f9;--jkl-text-input-selection-color:#f9f9f940;--jkl-text-input-error-background-color:#f6b3b3;--jkl-text-input-error-text-color:#1b1917;--jkl-text-input-error-placeholder-color:#636060;--jkl-text-input-error-selection-color:#1b191733;--jkl-text-area-counter-count-color:#c8c5c3}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-text-input-font-size:var(--jkl-body-font-size);--jkl-text-input-line-height:var(--jkl-body-line-height);--jkl-text-input-font-weight:var(--jkl-body-font-weight);--jkl-text-input-height:3rem;--jkl-text-input-vertical-padding:0.5rem;--jkl-text-input-horizontal-padding:0.75rem;--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);--jkl-text-input-action-button-size:3rem;--jkl-text-input-action-button-icon-size:1.25rem;--jkl-text-input-action-button-padding:0.5rem 0;--jkl-text-input-action-button-focus-position:0.5rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-text-input-height:2.75rem;--jkl-text-input-action-button-size:2.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-text-input-font-size:var(--jkl-small-font-size);--jkl-text-input-line-height:var(--jkl-small-line-height);--jkl-text-input-font-weight:var(--jkl-small-font-weight);--jkl-text-input-height:2rem;--jkl-text-input-vertical-padding:0.25rem;--jkl-text-input-horizontal-padding:0.5rem;--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);--jkl-text-input-action-button-size:2rem;--jkl-text-input-action-button-icon-size:1.125rem;--jkl-text-input-action-button-padding:0;--jkl-text-input-action-button-focus-position:0}.jkl-text-input-action-button{align-items:center;background-color:initial;border-style:none;box-sizing:border-box;color:var(--jkl-text-input-border-color);cursor:pointer;display:flex;flex-shrink:0;height:var(--jkl-text-input-action-button-size);justify-content:center;margin-inline-start:calc(var(--jkl-text-input-horizontal-padding)*-1);outline:0;outline-style:none;padding:var(--jkl-text-input-action-button-padding);width:var(--jkl-text-input-action-button-size)}.jkl-text-input-action-button:active,.jkl-text-input-action-button:focus,.jkl-text-input-action-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-text-input-action-button{border-style:revert}.jkl-text-input-action-button,.jkl-text-input-action-button:active,.jkl-text-input-action-button:focus,.jkl-text-input-action-button:hover{outline:revert;outline-style:revert}}.jkl-text-input-action-button .jkl-icon-button__icon{height:var(--jkl-text-input-action-button-icon-size);width:var(--jkl-text-input-action-button-icon-size)}.jkl-text-input-action-button:hover{color:var(--jkl-text-input-focus-color)}@media screen and (forced-colors:active){.jkl-text-input-action-button:hover{border:.125rem inset ButtonText}}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-action-button:focus{position:relative}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-action-button:focus:after{box-shadow:inset 0 0 0 .125rem var(--jkl-text-input-focus-color);content:"";inset:var(--jkl-text-input-action-button-focus-position) var(--jkl-text-input-action-button-focus-position) var(--jkl-text-input-action-button-focus-position) var(--jkl-text-input-action-button-focus-position);position:absolute}@media screen and (forced-colors:active){.jkl-text-input-action-button{stroke:ButtonText;background-color:revert;border:revert}.jkl-text-input-action-button path,.jkl-text-input-action-button svg{stroke:ButtonText}}.jkl-text-input-wrapper{align-items:center;background-color:initial;border-radius:.1875rem;box-shadow:inset 0 0 0 .0625rem var(--jkl-text-input-border-color),0 0 0 .0625rem #0000;box-sizing:border-box;color:var(--jkl-text-input-text-color);display:flex;font-size:var(--jkl-text-input-font-size);font-weight:var(--jkl-text-input-font-weight);height:var(--jkl-text-input-height);line-height:var(--jkl-text-input-line-height);max-width:100%;position:relative;transition-duration:.15s;transition-property:color,box-shadow,background-color;transition-timing-function:ease}.jkl-text-input-wrapper:focus-within,.jkl-text-input-wrapper:hover{border-color:var(--jkl-text-input-focus-color);box-shadow:inset 0 0 0 .0625rem var(--jkl-text-input-focus-color),0 0 0 .0625rem var(--jkl-text-input-focus-color)}.jkl-text-input-wrapper:focus-within{background-color:var(--jkl-text-input-background-color)}.jkl-text-input-wrapper[data-invalid=true]{background-color:var(--jkl-text-input-error-background-color);color:var(--jkl-text-input-error-text-color)}.jkl-text-input{align-items:flex-start;display:flex;flex-direction:column}.jkl-text-input__input{-webkit-appearance:none;background:none;border-style:none;color:var(--jkl-color);font-size:var(--jkl-text-input-font-size);font-weight:var(--jkl-text-input-font-weight);line-height:var(--jkl-text-input-line-height);padding:var(--jkl-text-input-padding);width:100%}.jkl-text-input__input,.jkl-text-input__input:active,.jkl-text-input__input:focus,.jkl-text-input__input:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-text-input__input{border-style:revert}.jkl-text-input__input,.jkl-text-input__input:active,.jkl-text-input__input:focus,.jkl-text-input__input:hover{outline:revert;outline-style:revert}}.jkl-text-input__input input[type=number]::-webkit-inner-spin-button,.jkl-text-input__input input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.jkl-text-input__input input[type=number]{-moz-appearance:textfield}.jkl-text-input__input::placeholder{color:var(--jkl-text-input-placeholder-color);opacity:1}.jkl-text-input__input::selection{background-color:var(--jkl-text-input-selection-color)}[data-theme=dark] .jkl-text-input__input::selection{background-color:var(--jkl-text-input-selection-color)}.jkl-text-input__input[aria-invalid=true]{color:var(--jkl-text-input-error-text-color)}.jkl-text-input__input[aria-invalid=true]::placeholder{color:var(--jkl-text-input-error-placeholder-color)}.jkl-text-input__input[aria-invalid=true]::selection{background-color:var(--jkl-text-input-error-selection-color)}.jkl-text-input__input[aria-invalid=true]~.jkl-text-input-action-button{color:var(--jkl-text-input-error-placeholder-color)}.jkl-text-input__input[aria-invalid=true]~.jkl-text-input-action-button:hover{color:var(--jkl-text-input-error-text-color)}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input__input[aria-invalid=true]~.jkl-text-input-action-button:focus:after{box-shadow:inset 0 0 0 .125rem var(--jkl-text-input-error-text-color)}.jkl-text-input__input[aria-invalid=true]~.jkl-text-input__unit{color:var(--jkl-text-input-error-text-color)}.jkl-text-input__input--align-right{text-align:right}.jkl-text-input__unit{color:var(--jkl-text-input-unit-color);padding-block:var(--jkl-text-input-vertical-padding);padding-inline-end:var(--jkl-text-input-horizontal-padding)}.jkl-text-input__action-button{margin-inline-start:calc(var(--jkl-text-input-horizontal-padding)*-1)}.jkl-text-input--inline{display:inline-block;margin:-.125rem .25rem;vertical-align:middle}.jkl-text-area{height:auto;width:100%}.jkl-text-area__text-area{-webkit-appearance:none;background:none;border-style:none;box-sizing:border-box;color:var(--jkl-color);font-size:var(--jkl-text-input-font-size);font-weight:var(--jkl-text-input-font-weight);height:var(--jkl-text-input-height);line-height:var(--jkl-text-input-line-height);max-height:var(--jkl-text-input-height);min-height:var(--jkl-text-input-height);padding:var(--jkl-text-input-padding);resize:none;scrollbar-color:var(--jkl-color) #0000;transition-duration:.15s;transition-property:height,min-height,max-height,padding;transition-timing-function:ease;width:100%}.jkl-text-area__text-area,.jkl-text-area__text-area:active,.jkl-text-area__text-area:focus,.jkl-text-area__text-area:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-text-area__text-area{border-style:revert}.jkl-text-area__text-area,.jkl-text-area__text-area:active,.jkl-text-area__text-area:focus,.jkl-text-area__text-area:hover{outline:revert;outline-style:revert}}.jkl-text-area__text-area input[type=number]::-webkit-inner-spin-button,.jkl-text-area__text-area input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.jkl-text-area__text-area input[type=number]{-moz-appearance:textfield}.jkl-text-area__text-area::placeholder{color:var(--jkl-text-input-placeholder-color);opacity:1}.jkl-text-area__text-area::selection{background-color:var(--jkl-text-input-selection-color)}[data-theme=dark] .jkl-text-area__text-area::selection{background-color:var(--jkl-text-input-selection-color)}.jkl-text-area__text-area[aria-invalid=true]{color:var(--jkl-text-input-error-text-color)}.jkl-text-area__text-area[aria-invalid=true]::placeholder{color:var(--jkl-text-input-error-placeholder-color)}.jkl-text-area__text-area[aria-invalid=true]::selection{background-color:var(--jkl-text-input-error-selection-color)}.jkl-text-area__text-area[aria-invalid=true]~.jkl-text-input-action-button{color:var(--jkl-text-input-error-placeholder-color)}.jkl-text-area__text-area[aria-invalid=true]~.jkl-text-input-action-button:hover{color:var(--jkl-text-input-error-text-color)}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area__text-area[aria-invalid=true]~.jkl-text-input-action-button:focus:after{box-shadow:inset 0 0 0 .125rem var(--jkl-text-input-error-text-color)}.jkl-text-area__text-area[aria-invalid=true]~.jkl-text-input__unit{color:var(--jkl-text-input-error-text-color)}.jkl-text-area .jkl-text-input-wrapper{height:auto;max-height:100%}.jkl-text-area--start-open .jkl-text-input-wrapper{max-height:100%}.jkl-text-area--auto-expand .jkl-text-area__text-area{overflow:hidden}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-input-wrapper{position:relative}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-input-wrapper:focus-within,.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-input-wrapper[data-has-content=true]{padding-bottom:calc(var(--jkl-text-input-height) + .25rem)}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter{bottom:0;left:0;opacity:0;pointer-events:none;position:absolute;right:0;transition-duration:.15s;transition-property:opacity;transition-timing-function:ease}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-count{--jkl-icon-weight:300;color:var(--jkl-text-area-counter-count-color);font-size:1rem;font-weight:400;line-height:1.5rem;padding:var(--jkl-text-input-padding)}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-progress{background-color:initial;height:.25rem;overflow:hidden;width:100%}.jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-progress:after{background-color:var(--jkl-color);content:"";display:block;height:.25rem;transition-duration:.4s;transition-property:width;transition-timing-function:ease;width:var(--progress-width,100%)}.jkl-text-area:has(.jkl-text-area__counter):focus-within .jkl-text-area__counter{opacity:1;transition-delay:.15s}.jkl-text-area:has(.jkl-text-area__counter) [aria-invalid=true]~.jkl-text-area__counter{color:var(--jkl-text-input-error-text-color)}.jkl-text-area--start-open .jkl-text-area__text-area--3-rows,.jkl-text-area__text-area--3-rows:focus,.jkl-text-area__text-area--3-rows:not(:placeholder-shown){--height:calc(var(--jkl-text-input-line-height)*3);--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--4-rows,.jkl-text-area__text-area--4-rows:focus,.jkl-text-area__text-area--4-rows:not(:placeholder-shown){--height:calc(var(--jkl-text-input-line-height)*4);--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--5-rows,.jkl-text-area__text-area--5-rows:focus,.jkl-text-area__text-area--5-rows:not(:placeholder-shown){--height:calc(var(--jkl-text-input-line-height)*5);--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--6-rows,.jkl-text-area__text-area--6-rows:focus,.jkl-text-area__text-area--6-rows:not(:placeholder-shown){--height:calc(var(--jkl-text-input-line-height)*6);--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--7-rows,.jkl-text-area__text-area--7-rows:focus,.jkl-text-area__text-area--7-rows:not(:placeholder-shown){--height:calc(var(--jkl-text-input-line-height)*7);--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--8-rows,.jkl-text-area__text-area--8-rows:focus,.jkl-text-area__text-area--8-rows:not(:placeholder-shown){--height:calc(var(--jkl-text-input-line-height)*8);--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--9-rows,.jkl-text-area__text-area--9-rows:focus,.jkl-text-area__text-area--9-rows:not(:placeholder-shown){--height:calc(var(--jkl-text-input-line-height)*9);--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}.jkl-text-area--start-open .jkl-text-area__text-area--10-rows,.jkl-text-area__text-area--10-rows:focus,.jkl-text-area__text-area--10-rows:not(:placeholder-shown){--height:calc(var(--jkl-text-input-line-height)*10);--vertical-padding:calc(var(--jkl-text-input-vertical-padding)*2);height:calc(var(--height) + var(--vertical-padding));max-height:100%;min-height:calc(var(--height) + var(--vertical-padding))}