@entur/form 9.0.2-beta.0 → 9.1.1-beta.0

package/dist/styles.css

@@ -1145,37 +1145,37 @@
 .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{
+.eds-checkbox:hover:not(.eds-checkbox--readonly):not(.eds-checkbox--disabled) input + .eds-checkbox__icon{
   border-color:var(--components-form-checkbox-standard-border);
   background-color:var(--components-form-checkbox-standard-fill-hover);
 }
-.eds-contrast .eds-checkbox__container:hover:not(:has(input:disabled)) input + .eds-checkbox__icon{
+.eds-contrast .eds-checkbox:hover:not(.eds-checkbox--readonly):not(.eds-checkbox--disabled) input + .eds-checkbox__icon{
   border-color:var(--components-form-checkbox-contrast-border);
   background-color:var(--components-form-checkbox-contrast-fill-hover);
 }
-.eds-checkbox__container:hover:not(:has(input:disabled)) input:checked + .eds-checkbox__icon,
-.eds-checkbox__container:hover:not(:has(input:disabled)) input:indeterminate + .eds-checkbox__icon:not(.eds-checkbox--disabled){
+.eds-checkbox:hover:not(.eds-checkbox--readonly):not(.eds-checkbox--disabled) input:checked + .eds-checkbox__icon,
+.eds-checkbox:hover:not(.eds-checkbox--readonly):not(.eds-checkbox--disabled) input:indeterminate + .eds-checkbox__icon:not(.eds-checkbox--disabled){
   border-color:transparent;
   background-color:var(--components-form-checkbox-standard-fill-selectedhover);
 }
-.eds-contrast .eds-checkbox__container:hover:not(:has(input:disabled)) input:checked + .eds-checkbox__icon,
-.eds-contrast .eds-checkbox__container:hover:not(:has(input:disabled)) input:indeterminate + .eds-checkbox__icon:not(.eds-checkbox--disabled){
+.eds-contrast .eds-checkbox:hover:not(.eds-checkbox--readonly):not(.eds-checkbox--disabled) input:checked + .eds-checkbox__icon,
+.eds-contrast .eds-checkbox:hover:not(.eds-checkbox--readonly):not(.eds-checkbox--disabled) input:indeterminate + .eds-checkbox__icon:not(.eds-checkbox--disabled){
   background-color:var(--components-form-checkbox-contrast-fill-selectedhover);
 }
-.eds-checkbox__container:active:not(:has(input:disabled)) input:checked + .eds-checkbox__icon,
-.eds-checkbox__container:active:not(:has(input:disabled)) input:indeterminate + .eds-checkbox__icon{
+.eds-checkbox:active:not(.eds-checkbox--readonly):not(.eds-checkbox--disabled) input:checked + .eds-checkbox__icon,
+.eds-checkbox:active:not(.eds-checkbox--readonly):not(.eds-checkbox--disabled) input:indeterminate + .eds-checkbox__icon{
   background-color:var(--components-form-checkbox-standard-fill-selected);
 }
-.eds-contrast .eds-checkbox__container:active:not(:has(input:disabled)) input:checked + .eds-checkbox__icon,
-.eds-contrast .eds-checkbox__container:active:not(:has(input:disabled)) input:indeterminate + .eds-checkbox__icon{
+.eds-contrast .eds-checkbox:active:not(.eds-checkbox--readonly):not(.eds-checkbox--disabled) input:checked + .eds-checkbox__icon,
+.eds-contrast .eds-checkbox:active:not(.eds-checkbox--readonly):not(.eds-checkbox--disabled) input:indeterminate + .eds-checkbox__icon{
   background-color:var(--components-form-checkbox-contrast-fill-selected);
 }
-.eds-checkbox__container:has(:focus-visible) .eds-checkbox__icon{
+.eds-checkbox:has(:focus-visible) .eds-checkbox__icon{
   outline:2px solid #181c56;
   outline-color:var(--basecolors-stroke-focus-standard);
   outline-offset:0.125rem;
 }
-.eds-contrast .eds-checkbox__container:has(:focus-visible) .eds-checkbox__icon{
+.eds-contrast .eds-checkbox:has(:focus-visible) .eds-checkbox__icon{
   outline-color:var(--basecolors-stroke-focus-contrast);
 }
 .eds-checkbox--disabled{
@@ -1428,7 +1428,7 @@
   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);
+  background-color:var(--components-form-radio-standard-fill-selected);
   border-color:var(--components-form-radio-standard-border-readonly);
 }
 .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle{
@@ -1461,43 +1461,6 @@
   height:0;
   width:0;
 }
-.eds-input-panel > input:checked + .eds-input-panel__container{
-  border-color:var(--components-form-basepanel-standard-border-selected);
-  background:var(--components-form-basepanel-standard-fill-selected);
-}
-.eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container{
-  border-color:var(--components-form-basepanel-contrast-border-selected);
-  background:var(--components-form-basepanel-contrast-fill-selected);
-}
-.eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle{
-  width:0.75rem;
-  height:0.75rem;
-}
-.eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle{
-  background-color:var(--components-form-radio-contrast-icon);
-}
-.eds-input-panel > input:checked + .eds-input-panel__container:hover{
-  background-color:var(--components-form-basepanel-standard-fill-hover);
-  /* The following styling is needed to sync the inner checkbox/radiobutton's
-       hover state styling with the inputPanel container */
-}
-.eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover{
-  background-color:var(--components-form-basepanel-contrast-fill-hover);
-}
-.eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio{
-  background-color:var(--components-form-basepanel-standard-fill-hover);
-  border-color:var(--components-form-basepanel-standard-border-selected);
-}
-.eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio{
-  background-color:var(--components-form-basepanel-contrast-fill-hover);
-  border-color:var(--components-form-basepanel-contrast-border-selected);
-}
-.eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon{
-  border-color:transparent;
-}
-.eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon{
-  background-color:var(--components-form-checkbox-contrast-fill-selectedhover);
-}
 .eds-input-panel__container{
   background:var(--components-form-basepanel-standard-fill-default);
   border:0.125rem solid var(--components-form-basepanel-standard-border-default);
@@ -1534,47 +1497,89 @@
   -moz-transition:background ease-in-out 0.1s, border-color ease-in-out 0.1s;
   transition:background ease-in-out 0.1s, border-color ease-in-out 0.1s;
 }
+.eds-input-panel__container:hover{
+  background-color:var(--components-form-basepanel-standard-fill-hover);
+}
+.eds-contrast .eds-input-panel__container:hover{
+  background-color:var(--components-form-basepanel-contrast-fill-hover);
+}
 .eds-contrast .eds-input-panel__container{
   background-color:var(--components-form-basepanel-contrast-fill-default);
   border-color:var(--components-form-basepanel-contrast-border-default);
   color:var(--components-form-basepanel-contrast-text-accent);
 }
-.eds-input-panel__container:hover{
-  background-color:var(--components-form-basepanel-standard-fill-hover);
-  /* The following styling is needed to sync the inner checkbox/radiobutton's
-  hover state styling with the inputPanel container */
+.eds-input-panel__container .eds-checkbox__icon,
+.eds-input-panel__container .eds-checkbox__icon .eds-checkbox__icon,
+.eds-input-panel__container .eds-form-component--radio__radio{
+  width:1.5rem;
+  height:1.5rem;
+  margin-right:0;
 }
-.eds-contrast .eds-input-panel__container:hover{
-  background-color:var(--components-form-basepanel-contrast-fill-hover);
+.eds-input-panel :where(input:checked) + .eds-input-panel__container{
+  border-color:var(--components-form-basepanel-standard-border-selected);
+  background:var(--components-form-basepanel-standard-fill-selected);
+}
+.eds-contrast .eds-input-panel :where(input:checked) + .eds-input-panel__container{
+  border-color:var(--components-form-basepanel-contrast-border-selected);
+  background:var(--components-form-basepanel-contrast-fill-selected);
 }
-.eds-input-panel__container:hover .eds-checkbox__icon,
-.eds-input-panel__container:hover .eds-form-component--radio__radio{
+.eds-input-panel :where(input:checked) + .eds-input-panel__container:hover{
   background-color:var(--components-form-basepanel-standard-fill-hover);
-  border-color:var(--components-form-basepanel-standard-border-selected);
 }
-.eds-contrast .eds-input-panel__container:hover .eds-checkbox__icon,
-.eds-contrast .eds-input-panel__container:hover .eds-form-component--radio__radio{
+.eds-contrast .eds-input-panel :where(input:checked) + .eds-input-panel__container:hover{
   background-color:var(--components-form-basepanel-contrast-fill-hover);
-  border-color:var(--components-form-basepanel-contrast-border-selected);
 }
-input:disabled + .eds-input-panel__container{
-  background:var(--components-form-basepanel-standard-fill-disabled);
+.eds-input-panel--readonly .eds-input-panel__container{
+  border-style:dashed;
+  cursor:default;
+  border-color:var(--components-form-checkbox-standard-border-readonly);
+  background:var(--components-form-basepanel-standard-fill-default);
+  color:var(--components-form-basepanel-standard-text-accent);
+}
+.eds-contrast .eds-input-panel--readonly .eds-input-panel__container{
+  border-color:var(--components-form-checkbox-contrast-border-readonly);
+  background:var(--components-form-basepanel-contrast-fill-default);
+  color:var(--components-form-basepanel-contrast-text-accent);
+}
+.eds-input-panel--readonly .eds-input-panel__container:hover{
+  background-color:var(--components-form-basepanel-standard-fill-default);
+}
+.eds-contrast .eds-input-panel--readonly .eds-input-panel__container:hover{
+  background-color:var(--components-form-basepanel-contrast-fill-default);
+}
+.eds-input-panel--readonly :where(input:checked) + .eds-input-panel__container{
+  border-style:dashed;
+  border-color:var(--components-form-checkbox-standard-border-readonly);
+  background:var(--components-form-basepanel-standard-fill-default);
+}
+.eds-contrast .eds-input-panel--readonly :where(input:checked) + .eds-input-panel__container{
+  border-color:var(--components-form-checkbox-contrast-border-readonly);
+  background:var(--components-form-basepanel-contrast-fill-default);
+}
+.eds-input-panel--disabled .eds-input-panel__container{
+  cursor:not-allowed;
   border-color:var(--components-form-basepanel-standard-border-disabled);
+  background:var(--components-form-basepanel-standard-fill-disabled);
   color:var(--components-form-basepanel-standard-text-disabled);
-  cursor:not-allowed;
 }
-.eds-contrast input:disabled + .eds-input-panel__container{
-  background:var(--components-form-basepanel-contrast-fill-disabled);
-  border-style:dashed;
+.eds-contrast .eds-input-panel--disabled .eds-input-panel__container{
   border-color:var(--components-form-basepanel-contrast-border-disabled);
+  background:var(--components-form-basepanel-contrast-fill-disabled);
   color:var(--components-form-basepanel-contrast-text-disabled);
 }
-.eds-input-panel__container .eds-checkbox__icon,
-.eds-input-panel__container .eds-checkbox__icon .eds-checkbox__icon,
-.eds-input-panel__container .eds-form-component--radio__radio{
-  width:1.5rem;
-  height:1.5rem;
-  margin-right:0;
+.eds-input-panel--disabled .eds-input-panel__container:hover{
+  background-color:var(--components-form-basepanel-standard-fill-disabled);
+}
+.eds-contrast .eds-input-panel--disabled .eds-input-panel__container:hover{
+  background-color:var(--components-form-basepanel-contrast-fill-disabled);
+}
+.eds-input-panel--disabled :where(input:checked) + .eds-input-panel__container{
+  border-color:var(--components-form-basepanel-standard-border-disabled);
+  background:var(--components-form-basepanel-standard-fill-disabled);
+}
+.eds-contrast .eds-input-panel--disabled :where(input:checked) + .eds-input-panel__container{
+  border-color:var(--components-form-basepanel-contrast-border-disabled);
+  background:var(--components-form-basepanel-contrast-fill-disabled);
 }
 .eds-input-panel--medium .eds-input-panel__title{
   font-size:1rem;
@@ -1584,14 +1589,14 @@ input:disabled + .eds-input-panel__container{
   padding-bottom:1rem;
   min-height:3.75rem;
 }
-.eds-input-panel--large.eds-input-panel__container{
-  min-height:6rem;
-}
 .eds-input-panel--large .eds-input-panel__title{
   font-size:1.25rem;
   font-weight:500;
   line-height:1.875rem;
 }
+.eds-input-panel--large.eds-input-panel__container{
+  min-height:6rem;
+}
 .eds-input-panel__title-wrapper{
   display:-webkit-box;
   display:-webkit-flex;
@@ -1954,45 +1959,43 @@ input:disabled + .eds-input-panel__container{
 .eds-textarea__wrapper .eds-form-control-wrapper{
   padding-right:0;
   cursor:text;
-}.eds-textfield__clear-button{
-  background:none;
-  border:none;
-  -webkit-border-radius:50%;
-     -moz-border-radius:50%;
-          border-radius:50%;
-  color:inherit;
-  cursor:pointer;
+}.eds-textfield__wrapper{
+  cursor:text;
+}
+.eds-textfield__append{
   display:-webkit-box;
   display:-webkit-flex;
   display:-moz-box;
   display:flex;
-  font:inherit;
-  font-size:1rem;
-  line-height:1rem;
-  padding:0.5rem;
-  margin-right:-0.75rem;
+  -webkit-box-orient:horizontal;
+  -webkit-box-direction:normal;
+  -webkit-flex-direction:row;
+     -moz-box-orient:horizontal;
+     -moz-box-direction:normal;
+          flex-direction:row;
+  -webkit-box-align:center;
+  -webkit-align-items:center;
+     -moz-box-align:center;
+          align-items:center;
+}
+.eds-textfield__append:has(.eds-textfield__clear-button){
+  margin-right:-1rem;
+}
+.eds-textfield__clear-button{
+  margin-inline:0.25rem;
 }
 .eds-textfield__clear-button:hover{
-  background:var(--components-form-basepanel-standard-fill-hover);
+  background:var(--components-button-iconbutton-standard-hover);
 }
 .eds-textfield__clear-button:focus-visible{
   outline:2px solid #181c56;
   outline-color:var(--basecolors-stroke-focus-standard);
-  outline-offset:0.125rem;
 }
-.eds-textfield__clear-button-wrapper{
-  display:-webkit-box;
-  display:-webkit-flex;
-  display:-moz-box;
-  display:flex;
-  -webkit-box-align:center;
-  -webkit-align-items:center;
-     -moz-box-align:center;
-          align-items:center;
-}
-
 .eds-textfield__divider{
   content:"";
+  -webkit-margin-start:0.75rem;
+     -moz-margin-start:0.75rem;
+          margin-inline-start:0.75rem;
   display:block;
   background-color:var(--components-form-baseform-standard-icon);
   height:1.5rem;
@@ -2000,10 +2003,6 @@ input:disabled + .eds-input-panel__container{
 }
 .eds-contrast .eds-form-control-wrapper--disabled .eds-textfield__divider{
   background-color:var(--components-form-baseform-contrast-icon);
-}
-
-.eds-textfield__wrapper{
-  cursor:text;
 }.eds-segmented-control .eds-label{
   font-weight:600;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@entur/form",
-  "version": "9.0.2-beta.0",
+  "version": "9.1.1-beta.0",
   "license": "EUPL-1.2",
   "main": "dist/form.cjs.js",
   "module": "dist/form.esm.js",
@@ -27,12 +27,12 @@
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "@entur/button": "^3.4.0-beta.0",
-    "@entur/icons": "^8.3.0-beta.0",
+    "@entur/button": "^3.3.20-beta.0",
+    "@entur/icons": "^8.3.0",
     "@entur/tokens": "^3.20.0",
-    "@entur/tooltip": "^5.2.18-beta.0",
-    "@entur/typography": "^2.0.4-beta.0",
-    "@entur/utils": "^0.12.5",
+    "@entur/tooltip": "^5.2.19-beta.0",
+    "@entur/typography": "^3.0.0-beta.0",
+    "@entur/utils": "^0.12.6-beta.0",
     "classnames": "^2.5.1"
   },
   "devDependencies": {
@@ -48,5 +48,5 @@
     "vite": "^7.1.3",
     "vite-plugin-dts": "^4.5.4"
   },
-  "gitHead": "e3da53c27deec5444106581c2339049814f633fe"
+  "gitHead": "89f96eb3e2da5ec84f0a1224bc6e20021255e389"
 }