optimized-react-component-library-xyz123 2.9.6 → 2.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "optimized-react-component-library-xyz123",
-  "version": "2.9.6",
+  "version": "2.10.1",
   "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;
@@ -453,7 +463,8 @@
     color: var(--dark-main);
   }
 
-  .pts-open-close-icon svg path {
+  .pts-open-close-icon svg path,
+  .pts-collapse-open-close-icon svg path{
     fill: var(--dark-main);
   }
 
@@ -506,7 +517,7 @@
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='94' height='94' viewBox='0 0 94 94' fill='none'%3e%3cpath d='M47 11.75C66.4682 11.75 82.25 27.532 82.25 47C82.25 66.4682 66.4682 82.25 47 82.25C27.532 82.25 11.75 66.4682 11.75 47C11.75 27.532 27.532 11.75 47 11.75Z' stroke='%23B07CBF' stroke-opacity='0.25' stroke-width='7.83333' stroke-linecap='round'/%3e%3cpath d='M47 11.75C66.4682 11.75 82.25 27.532 82.25 47' stroke='%23B07CBF' stroke-width='7.83333' stroke-linecap='round'/%3e%3c/svg%3e");
   }
 
-  .pts-modal-overlay {
+  .pts-modal-overlay, .pts-navigation-overlay {
     background-color: rgba(255, 255, 255, 0.5);
   }
 
@@ -517,20 +528,17 @@
     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-text);
+    color: var(--dark-alertintext-text);
   }
 
   /*-------------Autofill-----------*/

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,42 @@ 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 +308,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,
@@ -351,7 +354,7 @@ input:focus-visible:-webkit-autofill {
   transform: translateX(100%);
   transition:
     transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
-    opacity 1s;
+    opacity 0.1s;
 }
 
 .pts-navigation-menu-container.open {
@@ -384,6 +387,7 @@ input:focus-visible:-webkit-autofill {
 }
 
 .pts-navigation-link-expand-button {
+  all:unset;
   border: none;
   padding: 0;
   cursor: pointer;
@@ -523,7 +527,6 @@ input:focus-visible:-webkit-autofill {
   flex-shrink: 0;
   margin-right: 1.6rem;
 }
-
 .pts-textbody-alerttext {
   margin-top: 0;
 }
@@ -531,7 +534,6 @@ input:focus-visible:-webkit-autofill {
   margin-bottom: 3.6rem;
 }
 
-
 /* ---------- TEXT HEADLINE AND BODY ---------- */
 
 .pts-textHeadlineAndBody-container .notFirstInList {
@@ -546,6 +548,12 @@ input:focus-visible:-webkit-autofill {
   margin-top: 1.6rem;
 }
 
+/* ---------- OptionTextBody ---------- */
+
+.pts-optionTextBody-container{
+  margin-top: 1.6rem;
+}
+
 /* ---------- STEPPER ---------- */
 
 .pts-stepper-container {
@@ -660,13 +668,23 @@ input:focus-visible:-webkit-autofill {
   font-size: 1.6rem;
 }
 
-.pts-collapse-button.open {
+.pts-collapse-open-close-icon.open {
   border-radius: 8px 8px 0 0;
 }
 
+.pts-collapse-open-close-icon svg{
+  width: 2.4rem;
+  height: 2.4rem;
+  position: relative;
+  top: 3px;
+}
+  
+
 .pts-collapse-button .pts-open-close-icon svg {
   width: 2.4rem;
   height: 2.4rem;
+  position: relative;
+  top: 3px;
 }
 
 .pts-collapse-body {
@@ -682,6 +700,7 @@ input:focus-visible:-webkit-autofill {
   border: 2px solid var(--background);
   border-top: none;
   border-radius: 0 0 8px 8px;
+  margin-top: -5px;
 }
 
 .pts-collapse-content {
@@ -729,10 +748,14 @@ input:focus-visible:-webkit-autofill {
   padding: 0;
 }
 .pts-linkList-container li {
-  padding: 6px;
+  padding-bottom: 16px;
   list-style: none;
 }
 
+.pts-linkList-container li:last-child{
+  padding-bottom:0 ;
+}
+
 /* ---------- GRANSKA-Sidan ---------- */
 .pts-editPreviewLink-container {
   display: flex;
@@ -1033,37 +1056,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%;