optimized-react-component-library-xyz123 2.13.1 → 2.14.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "optimized-react-component-library-xyz123",
-  "version": "2.13.1",
+  "version": "2.14.2",
   "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

@@ -20,6 +20,14 @@
     color: var(--dark-text);
   }
 
+  .pts-secondary-button {
+    border-color: var(--dark-background-second);
+  }
+
+  .pts-secondary-button:hover {
+    border-color: var(--dark-text);
+  }
+
   /*----------COOKIE BANNER-------*/
   .pts-cookieBanner {
     background-color: var(--dark-main) !important;
@@ -65,6 +73,15 @@
     fill: var(--dark-text);
   }
 
+  .pts-header-content {
+    background-color: var(--dark-background);
+  }
+
+  .pts-header-logo-container,
+  .pts-header-navigation-container {
+    background: var(--dark-background-second);
+  }
+
   .pts-languageButton {
     color: var(--dark-text);
   }
@@ -79,6 +96,7 @@
   .pts-navigation-header-headline-container {
     border-color: var(--dark-background-third) !important;
   }
+
   .pts-navigation-header-nav-container button svg path,
   .pts-navigation-header-nav-container button svg line {
     color: var(--dark-text);
@@ -372,16 +390,14 @@
     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");
+    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;
@@ -464,7 +480,7 @@
   }
 
   .pts-open-close-icon svg path,
-  .pts-collapse-open-close-icon svg path{
+  .pts-collapse-open-close-icon svg path {
     fill: var(--dark-main);
   }
 
@@ -517,7 +533,8 @@
     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-navigation-overlay {
+  .pts-modal-overlay,
+  .pts-navigation-overlay {
     background-color: rgba(255, 255, 255, 0.5);
   }
 

package/src/css/mobileView.css

@@ -25,6 +25,10 @@
     align-items: center;
   }
 
+  .pts-site-headline {
+    margin-bottom: unset;
+  }
+
   .pts-site-headline,
   .pts-navigation-header-headline-container p {
     font-size: 1.6rem;
@@ -34,11 +38,65 @@
   .pts-navigation-header-nav-container {
     align-items: center;
     justify-content: center;
-    height: 48px;
+    height: 4.8rem;
+    gap: 0.6rem;
+    margin-bottom: unset;
   }
 
-  .pts-navigation-header-nav-container button {
-    width: 100%;
+  .pts-navigation-header-nav-container {
+    width: calc(100% - 3.2rem);
+    padding: 0 1.6rem;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    align-items: center;
+    height: 4.8rem;
+  }
+
+  .pts-navigation-header-nav-container .pts-secondary-button {
+    width: 120px;
+  }
+
+  /*--- 3 knappar ---*/
+  .pts-navigation-header-nav-container .pts-secondary-button:nth-child(1) {
+    justify-self: start;
+  }
+
+  .pts-navigation-header-nav-container .pts-secondary-button:nth-child(2) {
+    justify-self: center;
+  }
+
+  .pts-navigation-header-nav-container .pts-secondary-button:nth-child(3) {
+    justify-self: end;
+  }
+
+  /*--- 2 knappar: mitten och höger ---*/
+  .pts-navigation-header-nav-container:has(.pts-secondary-button:nth-child(2)):not(
+      :has(.pts-secondary-button:nth-child(3))
+    ) {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+
+  .pts-navigation-header-nav-container:has(.pts-secondary-button:nth-child(2)):not(
+      :has(.pts-secondary-button:nth-child(3))
+    )
+    .pts-secondary-button:nth-child(1) {
+    grid-column: 2;
+    justify-self: center;
+  }
+
+  .pts-navigation-header-nav-container:has(.pts-secondary-button:nth-child(2)):not(
+      :has(.pts-secondary-button:nth-child(3))
+    )
+    .pts-secondary-button:nth-child(2) {
+    grid-column: 3;
+    justify-self: end;
+  }
+
+  /*--- 1 knapp: höger ---*/
+  .pts-navigation-header-nav-container:not(:has(.pts-secondary-button:nth-child(2)))
+    .pts-secondary-button {
+    grid-column: 2;
+    justify-self: center;
   }
 
   .pts-navigation-close-button {
@@ -116,6 +174,11 @@
     padding-top: 0;
   }
 
+  .pts-footer-linkList .pts-secondary-button {
+    margin-left: unset;
+    border-color: var(--background);
+  }
+
   .pts-footer-linkList a span {
     padding: 0;
   }
@@ -190,10 +253,13 @@
   .pts-header-navigation-container {
     align-items: center;
     justify-content: center;
+    margin-top: 0.4rem;
+    margin-bottom: unset;
   }
 
   .pts-languageButton {
     margin: 0.4rem 0;
+    margin-left: -10px;
   }
 
   .languageIcon {
@@ -261,7 +327,7 @@
     margin-right: 1.6rem;
     margin-top: 1.6rem;
   }
- /*****Questions*******/
+  /*****Questions*******/
   .pts-textArea-container textarea {
     width: 100%;
     box-sizing: border-box;

package/src/css/styles.css

@@ -64,7 +64,6 @@
   border: 0;
 }
 
-
 select:focus-visible,
 button:focus-visible,
 a:focus-visible,
@@ -115,13 +114,38 @@ input:focus-visible:-webkit-autofill {
   box-shadow: 0 0 0 0px #000 !important;
 }
 
+.pts-secondary-button {
+  display: inline-flex;
+  align-items: center;
+  background: none;
+  margin: 0;
+  font: inherit;
+  text-align: inherit;
+  line-height: normal;
+  cursor: pointer;
+  outline: none;
+  white-space: nowrap;
+  color: var(--action);
+  padding: 0.8rem 2rem;
+  border: 2px solid var(--main);
+  border-radius: 0.8rem;
+}
+
+.pts-secondary-button:hover {
+  border-color: var(--action);
+}
+
+.secondary_icon {
+  padding-right: 0.6rem;
+}
+
 /* ---------- COOKIE BANNER ---------- */
 
 .pts-cookieBanner {
   position: relative;
   top: 0;
   left: 0;
-  padding: 15px 20px;
+  padding: 1.5rem 2rem;
   background: #eaf1f9;
   border-bottom: 4px solid var(--action);
   z-index: 9999;
@@ -138,7 +162,7 @@ input:focus-visible:-webkit-autofill {
 
 .pts-cookieBanner p {
   line-height: 2.4rem;
-  margin: 0 0 15px 0;
+  margin: 0 0 1.5rem 0;
 }
 .pts-cookieBanner-Links {
   margin-bottom: 1.6rem;
@@ -157,7 +181,7 @@ input:focus-visible:-webkit-autofill {
   min-width: 140px;
   text-align: center;
   font-size: 1.4rem;
-  padding: 8px 15px;
+  padding: 0.8rem 1.5rem;
   background-color: var(--action);
   border: 2px solid var(--action);
   color: white;
@@ -197,7 +221,7 @@ input:focus-visible:-webkit-autofill {
 .pts-header-container {
   display: flex;
   min-height: 80px;
-  padding: 0px 70px;
+  padding: 0px 7rem;
   align-items: center;
   justify-content: space-between;
   background-color: var(--main);
@@ -206,10 +230,12 @@ input:focus-visible:-webkit-autofill {
 .pts-header-content {
   width: 100%;
   display: flex;
+  background-color: var(--background);
 }
 
 .pts-header-logo-container {
   height: 4rem;
+  background: var(--main);
 }
 
 .pts-header-logo svg {
@@ -222,22 +248,13 @@ input:focus-visible:-webkit-autofill {
   justify-content: flex-end;
   width: 100%;
   align-items: flex-end;
-}
-
-.pts-languageButton {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  background: transparent;
-  border: transparent;
-  color: var(--action);
-  cursor: pointer;
-  font-size: 1.6rem;
+  margin-bottom: -1.6rem;
+  background: var(--main);
 }
 
 .languageIcon {
   position: relative;
-  margin-top: 0.3rem;
+  margin-top: 0.4rem;
   padding-right: 0.6rem;
   top: 0.01rem;
 }
@@ -247,16 +264,12 @@ input:focus-visible:-webkit-autofill {
   height: 1.6rem;
 }
 
-.pts-languageButton-text:hover {
-  text-decoration: underline 0.2rem;
-}
-
 /**Header with navigation**/
 
 .pts-navigation-header-container {
   display: flex;
   min-height: 80px;
-  padding: 0px 70px;
+  padding: 0px 0.7rem;
   align-items: center;
   justify-content: space-between;
   background-color: var(--main);
@@ -298,6 +311,10 @@ input:focus-visible:-webkit-autofill {
   bottom: -1px;
 }
 
+.pts-site-headline {
+  margin-bottom: -1.6rem;
+}
+
 .pts-navigation-header-nav-container .pts-open-icon {
   position: relative;
   top: 4px;
@@ -322,18 +339,10 @@ input:focus-visible:-webkit-autofill {
   width: 100%;
   align-items: flex-end;
   height: 5rem;
+  margin-bottom: -1.6rem;
 }
 
 .pts-navigation-header-nav-container button {
-  background: none;
-  line-height: 2.4rem;
-  text-decoration-skip-ink: none;
-  border: none;
-  color: var(--action);
-  font-size: 1.6rem;
-  padding: 0;
-  cursor: pointer;
-  width: 13rem;
   z-index: 900;
 }
 
@@ -387,7 +396,7 @@ input:focus-visible:-webkit-autofill {
 }
 
 .pts-navigation-link-expand-button {
-  all:unset;
+  all: unset;
   border: none;
   padding: 0;
   cursor: pointer;
@@ -399,7 +408,7 @@ input:focus-visible:-webkit-autofill {
   padding-left: 3.6rem;
   display: flex;
   align-items: flex-end;
-  gap: 18px;
+  gap: 1.8rem;
 }
 
 .pts-sub-navigation-list {
@@ -429,7 +438,6 @@ input:focus-visible:-webkit-autofill {
 }
 
 .pts-navigation-close-button {
-  border: none;
   color: var(--action);
   background-color: var(--main);
   display: flex;
@@ -552,7 +560,7 @@ input:focus-visible:-webkit-autofill {
 
 /* ---------- OptionTextBody ---------- */
 
-.pts-optionTextBody-container{
+.pts-optionTextBody-container {
   margin-top: 1.6rem;
 }
 
@@ -674,13 +682,12 @@ input:focus-visible:-webkit-autofill {
   border-radius: 8px 8px 0 0;
 }
 
-.pts-collapse-open-close-icon svg{
+.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;
@@ -754,8 +761,8 @@ input:focus-visible:-webkit-autofill {
   list-style: none;
 }
 
-.pts-linkList-container li:last-child{
-  padding-bottom:0 ;
+.pts-linkList-container li:last-child {
+  padding-bottom: 0;
 }
 
 /* ---------- GRANSKA-Sidan ---------- */
@@ -1006,6 +1013,18 @@ input:focus-visible:-webkit-autofill {
   box-sizing: border-box;
 }
 
+.pts-footer-linkList .pts-secondary-button {
+  position: relative;
+  color: var(--background);
+  border-color: var(--background-second);
+  margin-left: 1.6rem;
+  top: -0.5rem;
+}
+
+.pts-footer-linkList .pts-secondary-button:hover {
+  border-color: var(--background);
+}
+
 /* ---------- MODAL ---------- */
 
 .pts-modal-overlay {
@@ -1100,6 +1119,10 @@ input:focus-visible:-webkit-autofill {
 
 /*-----------ALWAYS IN THE END OF STYLES----------------*/
 
+.secondary_icon {
+  padding-right: 0.6rem;
+}
+
 .cleanPadding {
   padding: 0;
 }
@@ -1122,12 +1145,12 @@ input:focus-visible:-webkit-autofill {
   border: 0;
 }
 
-
 .hide-asterix .pts-root-mandatoryAsterisk {
   display: none;
 }
 
-[hidden],.hidden {
+[hidden],
+.hidden {
   display: none;
 }