optimized-react-component-library-xyz123 2.8.18 → 2.8.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "optimized-react-component-library-xyz123",
-  "version": "2.8.18",
+  "version": "2.8.20",
   "description": "A modern React component library using TypeScript with React 19 support.",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",

package/src/css/darkMode.css

@@ -372,6 +372,16 @@
     color: var(--dark-info);
   }
 
+  
+  /* ---------- DROPDOWN  ---------- */
+  .pts-dropdown-container select {
+    border-color: var(--dark-info);
+    background-color: var(--dark-main);
+    color: var(--dark-text);
+     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'  viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.7073 15.7069C12.5198 15.8943 12.2655 15.9996 12.0003 15.9996C11.7352 15.9996 11.4809 15.8943 11.2933 15.7069L5.63634 10.0499C5.54083 9.95761 5.46465 9.84726 5.41224 9.72526C5.35983 9.60326 5.33225 9.47204 5.33109 9.33926C5.32994 9.20648 5.35524 9.0748 5.40552 8.9519C5.4558 8.829 5.53006 8.71735 5.62395 8.62346C5.71784 8.52957 5.82949 8.45531 5.95239 8.40503C6.07529 8.35475 6.20696 8.32945 6.33974 8.3306C6.47252 8.33176 6.60374 8.35934 6.72575 8.41175C6.84775 8.46416 6.9581 8.54034 7.05034 8.63585L12.0003 13.5859L16.9503 8.63585C17.1389 8.4537 17.3915 8.3529 17.6537 8.35518C17.9159 8.35746 18.1668 8.46263 18.3522 8.64804C18.5376 8.83344 18.6427 9.08426 18.645 9.34645C18.6473 9.60865 18.5465 9.86125 18.3643 10.0499L12.7073 15.7069Z' fill='%23ffffff'/%3E%3C/svg%3E");
+  }
+
+
   /* ---------- ADD FILE QUESTION ---------- */
   .filePickText {
     color: var(--dark-text) !important;
@@ -517,17 +527,14 @@
     background-color: var(--dark-alertintext);
   }
   .pts-alertInText-left svg circle {
-    fill: var(--dark-main);
+    fill: var(--dark-background);
   }
-
   .pts-alertInText-left svg rect {
     fill: var(--dark-alertintext);
   }
-
   .pts-alertInText-left svg .pts-alertInText-icon-dot-over-i {
     fill: var(--dark-alertintext);
   }
-  
   .pts-alertInText-right {
     border: 1px solid var(--dark-alertintext);
     color: var(--dark-alertintext-text);

package/src/css/e-tjanst-root.css

@@ -58,7 +58,8 @@ h2:focus:focus-visible,
 }
 
 h1,
-h2 {
+h2,
+h3 {
   margin: 0;
   margin-bottom: 3.6rem;
 }
@@ -74,7 +75,6 @@ h2 {
 
 h3 {
   font-size: 1.6rem;
-  margin-bottom: 1.6rem;
 }
 
 h4 {

package/src/css/questions.css

@@ -57,6 +57,7 @@ div.pts-root-question:last-child {
   margin-bottom: 0.4rem;
 }
 
+.pts-root-question select,
 .pts-root-question input[type='text']:focus,
 .pts-root-question input[type='email']:focus,
 .pts-root-question input[type='tel']:focus {
@@ -111,6 +112,8 @@ div.pts-root-question:last-child {
   margin: 0;
 }
 
+
+.pts-root-question select,
 .pts-root-question input[type='text'],
 .pts-root-question input[type='email'],
 .pts-root-question input[type='tel'] {
@@ -151,10 +154,6 @@ div.pts-root-question:last-child {
   background-color: var(--action);
 }
 
-.pts-radioMultipleWithInfo2-container input[type='radio'] {
-  margin: auto;
-}
-
 .pts-radioMultiple-container label,
 .pts-radioMultipleWithInfo2-container label {
   position: relative;
@@ -164,25 +163,15 @@ div.pts-root-question:last-child {
 
 /****RADIO MULTIPLE WITH INFO*/
 
-.pts-radioMultipleWithInfo2-container legend {
-  margin-bottom: 16px;
-  font-weight: 600;
-  margin-top: 10px;
-}
-
-.pts-radioMultipleWithInfo2-container p {
-  margin-bottom: 0px;
-  margin-top: 16px;
-}
-
 .pts-radioWithInfo-sub-headline {
+  margin-block-start: 3.6rem;
   margin-block-end: 1.6rem;
-  font-size: 1.6rem;
+  font-size: 18px;
   font-weight: 700;
 }
 
 .pts-radioMultipleWithInfo2-container label {
-  padding-top: 0.2rem;
+  padding-top: 2px;
 }
 
 .pts-radio-collapse {
@@ -203,11 +192,11 @@ div.pts-root-question:last-child {
   display: grid;
   text-align: left;
   grid-template-columns: 5% 90% 5%;
-  align-items: flex-start;
+  align-items: center;
 }
 
 .pts-radio-collapse-button-container.open {
-  border-radius: 0.8rem 0.8rem 0 0;
+  border-radius: 8px 8px 0 0;
 }
 
 .pts-radio-collapse-button-container input {
@@ -245,6 +234,43 @@ div.pts-root-question:last-child {
   overflow: hidden;
 }
 
+/* ---------- DROPDOWN ---------- */
+
+/* För inspiration */
+
+.pts-dropdown-container {
+  margin-bottom: 1.5rem;
+}
+
+.pts-dropdown-container label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+}
+
+.pts-dropdown-container select {
+  cursor: pointer;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.7073 15.7069C12.5198 15.8943 12.2655 15.9996 12.0003 15.9996C11.7352 15.9996 11.4809 15.8943 11.2933 15.7069L5.63634 10.0499C5.54083 9.95761 5.46465 9.84726 5.41224 9.72526C5.35983 9.60326 5.33225 9.47204 5.33109 9.33926C5.32994 9.20648 5.35524 9.0748 5.40552 8.9519C5.4558 8.829 5.53006 8.71735 5.62395 8.62346C5.71784 8.52957 5.82949 8.45531 5.95239 8.40503C6.07529 8.35475 6.20696 8.32945 6.33974 8.3306C6.47252 8.33176 6.60374 8.35934 6.72575 8.41175C6.84775 8.46416 6.9581 8.54034 7.05034 8.63585L12.0003 13.5859L16.9503 8.63585C17.1389 8.4537 17.3915 8.3529 17.6537 8.35518C17.9159 8.35746 18.1668 8.46263 18.3522 8.64804C18.5376 8.83344 18.6427 9.08426 18.645 9.34645C18.6473 9.60865 18.5465 9.86125 18.3643 10.0499L12.7073 15.7069Z' fill='%23141414'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 14px center;
+  background-size: 2.4rem;;
+
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  transition:
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
+}
+
+.pts-dropdown-container select:focus {
+  outline: none;
+  border-width: 2px;
+  border-color: var(--action);
+}
+
+
 /* ---------- SINGLE CHECKBOX ---------- */
 
 .pts-singleCheckbox-row {
@@ -283,13 +309,6 @@ div.pts-root-question:last-child {
   margin-top: 0.2rem;
 }
 
-
-/*-------- INFO ONLY-------- */
-.pts-root-question:has(.pts-textbody-createspace){
-  max-width: 100%;
-}
-
-
 /*-------- CHECKBOX GROUP-------- */
 
 .pts-checkboxGroup-options {

package/src/css/styles.css

@@ -64,6 +64,8 @@
   border: 0;
 }
 
+
+select:focus-visible,
 button:focus-visible,
 a:focus-visible,
 input:focus-visible,
@@ -102,6 +104,7 @@ input:focus-visible:-webkit-autofill {
     0 0 0 4px #000 !important;
 }
 
+.using-mouse select:focus-visible,
 .using-mouse input:focus-visible,
 .using-mouse button:focus-visible,
 .using-mouse textarea:focus-visible,
@@ -523,7 +526,6 @@ input:focus-visible:-webkit-autofill {
   flex-shrink: 0;
   margin-right: 1.6rem;
 }
-
 .pts-textbody-alerttext {
   margin-top: 0;
 }
@@ -531,7 +533,6 @@ input:focus-visible:-webkit-autofill {
   margin-bottom: 3.6rem;
 }
 
-
 /* ---------- TEXT HEADLINE AND BODY ---------- */
 
 .pts-textHeadlineAndBody-container .notFirstInList {
@@ -546,6 +547,12 @@ input:focus-visible:-webkit-autofill {
   margin-top: 1.6rem;
 }
 
+/* ---------- OptionTextBody ---------- */
+
+.pts-optionTextBody-container{
+  margin-top: 1.6rem;
+}
+
 /* ---------- STEPPER ---------- */
 
 .pts-stepper-container {
@@ -1033,37 +1040,28 @@ input:focus-visible:-webkit-autofill {
     transform: rotate(360deg);
   }
 }
-
 /* ---------- ALERT IN TEXT ---------- */
-
 .pts-alertInText-container {
   display: flex;
   width: 100%;
   justify-content: flex-start;
 }
-
 .pts-alertInText-left {
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
-  gap: 10rem;
+  gap: 10px;
   align-self: stretch;
   border-top-left-radius: 8px;
   border-bottom-left-radius: 8px;
   border: 1px solid var(--alertintext);
   background-color: var(--alertintext);
-  padding: 0.8rem;
-  padding-top: 1.2rem;
+  padding: 8px;
+  padding-top: 16px;
 }
-
-.pts-alertInText-left svg {
-  height: 1.6rem;
-  width: 1.8rem;
-}
-
 .pts-alertInText-right {
   display: flex;
-  padding: 1.6rem 1.6rem 0 1.6rem;
+  padding: 0 1.6rem;
   justify-content: flex-start;
   align-items: flex-start;
   width: 100%;