@entur/form 8.2.10 → 8.3.0

package/dist/styles.css

@@ -34,11 +34,11 @@
 .eds-contrast .eds-form-control-wrapper:hover {
   border-color: var(--components-form-baseform-contrast-border-interactive);
 }
-.eds-form-control-wrapper:focus-within {
+.eds-form-control-wrapper:focus-within:not(.eds-form-control-wrapper--readonly) {
   border-color: var(--components-form-baseform-standard-border-interactive);
   outline: 2px solid var(--components-form-baseform-standard-border-interactive);
 }
-.eds-contrast .eds-form-control-wrapper:focus-within {
+.eds-contrast .eds-form-control-wrapper:focus-within:not(.eds-form-control-wrapper--readonly) {
   border-color: var(--components-form-baseform-contrast-border-interactive);
   outline-color: var(--components-form-baseform-contrast-border-interactive);
 }
@@ -78,11 +78,13 @@
 }
 .eds-form-control-wrapper--readonly {
   border-color: transparent;
-  pointer-events: none;
   cursor: default;
   background: var(--components-form-baseform-standard-fill-readonly);
   border: var(--components-form-baseform-standard-fill-readonly);
 }
+.eds-form-control-wrapper--readonly:focus-visible {
+  outline: none;
+}
 .eds-contrast .eds-form-control-wrapper--readonly {
   background: var(--components-form-baseform-contrast-fill-readonly);
   border: var(--components-form-baseform-contrast-fill-readonly);
@@ -208,84 +210,6 @@
 }
 /* DO NOT CHANGE!*/
 /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-.eds-feedback-text {
-  display: flex;
-  align-items: center;
-  margin-top: 0.25rem;
-}
-.eds-feedback-text--info, .eds-feedback-text--information {
-  padding-left: calc(1rem + 0.125rem);
-}
-.eds-feedback-text__text {
-  color: var(--components-form-feedbacktext-information-standard-text);
-}
-.eds-contrast .eds-feedback-text__text {
-  color: var(--components-form-feedbacktext-information-contrast-text);
-}
-
-.eds-feedback-text__icon {
-  font-size: 1.5rem;
-  min-height: 1.5rem;
-  min-width: 1.5rem;
-  padding-right: 0.5rem;
-  position: relative;
-  top: -0.1rem;
-}
-.eds-feedback-text__icon--success {
-  color: var(--components-form-feedbacktext-success-standard-icon-fill);
-}
-.eds-feedback-text__icon--success circle {
-  fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
-}
-.eds-contrast .eds-feedback-text__icon--success {
-  color: var(--components-form-feedbacktext-success-contrast-icon-fill);
-}
-.eds-contrast .eds-feedback-text__icon--success circle {
-  fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
-}
-.eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
-  color: var(--components-form-feedbacktext-negative-standard-icon-fill);
-}
-.eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
-  fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
-}
-.eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
-  color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
-}
-.eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
-  fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
-}
-.eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
-  color: var(--components-form-feedbacktext-information-standard-icon-fill);
-}
-.eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
-  fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
-}
-.eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
-  color: var(--components-form-feedbacktext-information-contrast-icon-fill);
-}
-.eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
-  fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
-}
-.eds-feedback-text__icon--warning {
-  color: var(--components-form-feedbacktext-warning-standard-icon-fill);
-}
-.eds-feedback-text__icon--warning .svg-exclamation {
-  fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
-}
-.eds-contrast .eds-feedback-text__icon--warning {
-  color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
-}
-.eds-contrast .eds-feedback-text__icon--warning circle {
-  fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
-}
-.eds-fieldset {
-  margin: 0;
-  padding: 0;
-  border: 0;
-}
-/* DO NOT CHANGE!*/
-/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
 .eds-checkbox__container {
   display: flex;
   align-items: center;
@@ -324,6 +248,15 @@
 .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
   fill: var(--components-form-checkbox-standard-icon);
 }
+.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-contrast, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-contrast {
+  color: var(--components-form-checkbox-contrast-fill-selected);
+}
+.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-contrast path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-contrast path {
+  stroke: var(--components-form-checkbox-contrast-icon);
+}
+.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-contrast rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-contrast rect {
+  fill: var(--components-form-checkbox-contrast-icon);
+}
 .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
   background-color: var(--components-form-checkbox-standard-icon-disabled);
 }
@@ -339,14 +272,20 @@
 .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
   background-color: var(--components-form-checkbox-standard-icon-disabled);
 }
-.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-contrast, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-contrast {
-  color: var(--components-form-checkbox-contrast-fill-selected);
+.eds-checkbox__container input:checked + .eds-checkbox__icon--readonly, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--readonly {
+  background-color: var(--components-form-checkbox-standard-fill-disabled);
 }
-.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-contrast path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-contrast path {
-  stroke: var(--components-form-checkbox-contrast-icon);
+.eds-checkbox__container input:checked + .eds-checkbox__icon--readonly .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--readonly .eds-checkbox-icon path {
+  stroke: var(--components-form-checkbox-standard-icon-readonly);
 }
-.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-contrast rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-contrast rect {
-  fill: var(--components-form-checkbox-contrast-icon);
+.eds-checkbox__container input:checked + .eds-checkbox__icon--readonly .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--readonly .eds-checkbox-icon rect {
+  fill: var(--components-form-checkbox-standard-icon-readonly);
+}
+.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon--readonly .eds-checkbox-icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--readonly .eds-checkbox-icon path {
+  stroke: var(--components-form-checkbox-contrast-icon-readonly);
+}
+.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon--readonly .eds-checkbox-icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--readonly .eds-checkbox-icon rect {
+  fill: var(--components-form-checkbox-contrast-icon-readonly);
 }
 .eds-checkbox__container:hover(:not(:has(input:disabled))) input + .eds-checkbox__icon {
   border-color: var(--components-form-checkbox-standard-border);
@@ -396,6 +335,25 @@
 .eds-contrast .eds-checkbox--disabled .eds-checkbox__icon {
   border-color: var(--components-form-checkbox-contrast-icon-disabled);
 }
+.eds-checkbox--readonly {
+  cursor: default;
+  pointer-events: auto;
+  -webkit-user-select: text;
+     -moz-user-select: text;
+          user-select: text;
+}
+.eds-checkbox--readonly input {
+  pointer-events: auto;
+  -webkit-user-select: text;
+     -moz-user-select: text;
+          user-select: text;
+}
+.eds-checkbox--readonly .eds-checkbox__icon {
+  border-color: var(--components-form-checkbox-standard-border-readonly);
+}
+.eds-contrast .eds-checkbox--readonly .eds-checkbox__icon {
+  border-color: var(--components-form-checkbox-contrast-border-readonly);
+}
 .eds-checkbox__icon {
   box-sizing: border-box;
   display: inline-flex;
@@ -427,6 +385,15 @@
   stroke-dashoffset: 48;
   stroke-width: 0.375rem;
 }
+.eds-checkbox__icon--no-animation .eds-checkbox-icon path {
+  animation: none !important;
+  transition: none !important;
+  stroke-dasharray: 48;
+  stroke-dashoffset: 0;
+}
+.eds-checkbox__icon--no-animation .eds-checkbox-icon rect {
+  transition: none !important;
+}
 
 @keyframes stroke {
   100% {
@@ -435,6 +402,84 @@
 }
 /* DO NOT CHANGE!*/
 /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
+.eds-feedback-text {
+  display: flex;
+  align-items: center;
+  margin-top: 0.25rem;
+}
+.eds-feedback-text--info, .eds-feedback-text--information {
+  padding-left: calc(1rem + 0.125rem);
+}
+.eds-feedback-text__text {
+  color: var(--components-form-feedbacktext-information-standard-text);
+}
+.eds-contrast .eds-feedback-text__text {
+  color: var(--components-form-feedbacktext-information-contrast-text);
+}
+
+.eds-feedback-text__icon {
+  font-size: 1.5rem;
+  min-height: 1.5rem;
+  min-width: 1.5rem;
+  padding-right: 0.5rem;
+  position: relative;
+  top: -0.1rem;
+}
+.eds-feedback-text__icon--success {
+  color: var(--components-form-feedbacktext-success-standard-icon-fill);
+}
+.eds-feedback-text__icon--success circle {
+  fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
+}
+.eds-contrast .eds-feedback-text__icon--success {
+  color: var(--components-form-feedbacktext-success-contrast-icon-fill);
+}
+.eds-contrast .eds-feedback-text__icon--success circle {
+  fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
+}
+.eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
+  color: var(--components-form-feedbacktext-negative-standard-icon-fill);
+}
+.eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
+  fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
+}
+.eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
+  color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
+}
+.eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
+  fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
+}
+.eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
+  color: var(--components-form-feedbacktext-information-standard-icon-fill);
+}
+.eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
+  fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
+}
+.eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
+  color: var(--components-form-feedbacktext-information-contrast-icon-fill);
+}
+.eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
+  fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
+}
+.eds-feedback-text__icon--warning {
+  color: var(--components-form-feedbacktext-warning-standard-icon-fill);
+}
+.eds-feedback-text__icon--warning .svg-exclamation {
+  fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
+}
+.eds-contrast .eds-feedback-text__icon--warning {
+  color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
+}
+.eds-contrast .eds-feedback-text__icon--warning circle {
+  fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
+}
+.eds-fieldset {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+/* DO NOT CHANGE!*/
+/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
 .eds-input-group {
   color: inherit;
   display: block;
@@ -564,6 +609,12 @@
 .eds-form-component--radio__container:has(input:disabled) {
   cursor: not-allowed;
 }
+.eds-form-component--radio__container:has(.eds-form-component--radio__radio--readonly) {
+  cursor: default;
+  -webkit-user-select: text;
+     -moz-user-select: text;
+          user-select: text;
+}
 .eds-form-component--radio__container .eds-form-component--radio__radio {
   position: relative;
   height: 1.25rem;
@@ -604,6 +655,18 @@
 .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled .eds-form-component--radio__circle {
   background-color: var(--components-form-radio-contrast-icon-disabled);
 }
+.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--readonly {
+  background: var(--components-form-radio-standard-fill-disabled);
+  border-color: var(--components-form-radio-standard-border-readonly);
+}
+.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--readonly {
+  background: var(--components-form-radio-contrast-fill-disabled);
+  border-color: var(--components-form-radio-contrast-border-readonly);
+}
+.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--readonly:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
+  background-color: var(--components-form-radio-standard-icon);
+  border-color: var(--components-form-radio-standard-border-readonly);
+}
 .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
   display: block;
   width: 0;
@@ -1092,17 +1155,6 @@ input:disabled + .eds-input-panel__container {
 }
 /* DO NOT CHANGE!*/
 /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-.eds-segmented-control {
-  margin-top: 0.25rem;
-  display: flex;
-  background: var(--components-form-segmentedcontrol-standard-background);
-  border-radius: 0.5rem;
-}
-.eds-contrast .eds-segmented-control {
-  background: var(--components-form-segmentedcontrol-contrast-background);
-}
-/* DO NOT CHANGE!*/
-/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
 .eds-segmented-choice {
   display: block;
   flex: 1 1 0px;
@@ -1185,6 +1237,17 @@ input:disabled + .eds-input-panel__container {
 }
 /* DO NOT CHANGE!*/
 /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
+.eds-segmented-control {
+  margin-top: 0.25rem;
+  display: flex;
+  background: var(--components-form-segmentedcontrol-standard-background);
+  border-radius: 0.5rem;
+}
+.eds-contrast .eds-segmented-control {
+  background: var(--components-form-segmentedcontrol-contrast-background);
+}
+/* DO NOT CHANGE!*/
+/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
 /* DO NOT CHANGE!*/
 /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
 /* DO NOT CHANGE!*/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@entur/form",
-  "version": "8.2.10",
+  "version": "8.3.0",
   "license": "EUPL-1.2",
   "main": "dist/index.js",
   "module": "dist/form.esm.js",
@@ -27,16 +27,16 @@
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "@entur/button": "^3.3.10",
-    "@entur/icons": "^7.13.0",
+    "@entur/button": "^3.3.12",
+    "@entur/icons": "^8.0.0",
     "@entur/tokens": "^3.19.1",
-    "@entur/tooltip": "^5.2.10",
-    "@entur/typography": "^1.9.10",
+    "@entur/tooltip": "^5.2.12",
+    "@entur/typography": "^1.9.12",
     "@entur/utils": "^0.12.3",
     "classnames": "^2.3.1"
   },
   "devDependencies": {
     "dts-cli": "2.0.5"
   },
-  "gitHead": "fce8c4670732d7dd2742d18f0d7759a364ba2c3c"
+  "gitHead": "4833d9307ba9b2524458c08e8815674094cef97b"
 }