@jumpu-ui/tailwindcss - npm Package Compare versions

Comparing version 2.0.0-alpha.2 to 2.0.0-alpha.3

dist/style.css

@@ -38,2 +38,4 @@ /*! tailwindcss v4.0.14 | MIT License | https://tailwindcss.com */
     --radius-2xl: 1rem;
+    --default-transition-duration: 150ms;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
@@ -213,2 +215,21 @@ --default-font-feature-settings: var(--font-sans--font-feature-settings);
   }
+  .flex {
+    display: flex;
+  }
+  .grid {
+    display: grid;
+  }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
+  .transition {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
 }
@@ -220,21 +241,22 @@ @layer theme;
     > [aria-expanded] {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
       width: 100%;
       padding-block: calc(var(--spacing) * 3);
       padding-inline: calc(var(--spacing) * 4);
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
       border-color: var(--color-gray-300);
       border-width: 1px;
       &::before {
-        content: "";
         display: block;
-        transition: 500ms;
         width: calc(var(--spacing) * 4);
         height: calc(var(--spacing) * 4);
         margin-inline-end: calc(var(--spacing) * 2);
+        content: "";
         background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20448%20512%22%3E%3Cpath%20d=%22M443.5%20162.6l-7.1-7.1c-4.7-4.7-12.3-4.7-17%200L224%20351%2028.5%20155.5c-4.7-4.7-12.3-4.7-17%200l-7.1%207.1c-4.7%204.7-4.7%2012.3%200%2017l211%20211.1c4.7%204.7%2012.3%204.7%2017%200l211-211.1c4.8-4.7%204.8-12.3.1-17z%22%3E%3C/path%3E%3C/svg%3E");
+        background-repeat: no-repeat;
         background-position: center;
-        background-repeat: no-repeat;
         background-size: calc(var(--spacing) * 4);
+        transition-duration: 500ms;
+        transition-property: transform;
       }
@@ -254,4 +276,5 @@ &:hover {
     > [aria-hidden] {
-      transition: 200ms;
-      overflow: hidden;
+      overflow-x: hidden;
+      overflow-y: hidden;
+      transition-duration: 200ms;
       &[aria-hidden="true"] {
@@ -265,6 +288,7 @@ display: none;
   .jumpu-avatar {
-    overflow: hidden;
-    border-radius: calc(infinity * 1px);
     width: calc(var(--spacing) * 16);
     height: calc(var(--spacing) * 16);
+    overflow-x: hidden;
+    overflow-y: hidden;
+    border-radius: calc(infinity * 1px);
     img {
@@ -282,10 +306,10 @@ width: 100%;
     display: inline-flex;
+    align-items: center;
     justify-content: center;
-    align-items: center;
     padding-block: calc(var(--spacing) * 1);
     padding-inline: calc(var(--spacing) * 3);
     font-size: var(--text-sm);
+    font-weight: bold;
+    text-decoration-line: none;
     border-radius: calc(infinity * 1px);
-    text-decoration: none;
-    font-weight: bold;
   }
@@ -301,3 +325,3 @@ }
     a {
-      text-decoration: underline;
+      text-decoration-line: underline;
     }
@@ -308,11 +332,11 @@ }
   .jumpu-boxed-tabs {
-    white-space: nowrap;
     overflow-x: auto;
     overflow-y: hidden;
+    white-space: nowrap;
     [role="tablist"] {
       display: flex;
-      align-items: center;
+      flex-grow: 1;
       flex-shrink: 0;
-      flex-grow: 1;
       gap: calc(var(--spacing) * 2);
+      align-items: center;
       border-color: var(--color-gray-300);
@@ -322,16 +346,16 @@ border-bottom-width: 1px;
     [role="tab"] {
+      padding-block: calc(var(--spacing-relative) * 1.5);
+      padding-inline: calc(var(--spacing-relative) * 5);
       margin-bottom: -1px;
+      border-color: transparent;
       border-width: 1px;
-      border-color: transparent;
       border-start-start-radius: var(--radius-md);
       border-start-end-radius: var(--radius-md);
-      padding-block: calc(var(--spacing-relative) * 1.5);
-      padding-inline: calc(var(--spacing-relative) * 5);
       &[aria-selected="true"] {
-        border-color: var(--color-gray-300);
-        background-color: var(--color-white);
-        border-bottom-color: transparent;
         position: relative;
         padding-block-start: calc(var(--spacing-relative) * 2);
         padding-block-end: calc(var(--spacing-relative) * 1.5);
+        background-color: var(--color-white);
+        border-color: var(--color-gray-300);
+        border-bottom-color: transparent;
       }
@@ -343,13 +367,13 @@ }
   .jumpu-button {
-    appearance: none;
-    border-radius: var(--radius-md);
     display: inline-block;
     padding-block: calc(var(--spacing-relative) * 2.5);
     padding-inline: calc(var(--spacing-relative) * 5);
-    text-decoration: none;
+    color: var(--color-white);
+    text-decoration-line: none;
+    appearance: none;
     background-color: var(--color-primary-700);
-    color: var(--color-white);
+    border-radius: var(--radius-md);
+    transition-timing-function: cubic-bezier(0, 0, 0.12, 1);
     transition-duration: 30ms;
     transition-property: filter;
-    transition-timing-function: cubic-bezier(0, 0, 0.12, 1);
     &:hover {
@@ -369,4 +393,4 @@ filter: brightness(90%);
       &:hover {
+        box-shadow: none;
         filter: none;
-        box-shadow: none;
       }
@@ -378,7 +402,8 @@ }
   .jumpu-card {
+    overflow-x: hidden;
+    overflow-y: hidden;
     background-color: var(--color-white);
-    border-radius: var(--radius-md);
-    overflow: hidden;
     border-color: var(--color-gray-300);
     border-width: 1px;
+    border-radius: var(--radius-md);
   }
@@ -389,13 +414,13 @@ }
     display: inline-flex;
+    align-items: center;
     justify-content: center;
-    align-items: center;
     padding-block: calc(var(--spacing) * 1);
     padding-inline: calc(var(--spacing) * 3);
     font-size: var(--text-xs);
-    border-radius: var(--radius-md);
-    text-decoration: none;
     line-height: var(--text-xs--line-height);
-    border: none;
+    color: var(--color-white);
+    text-decoration-line: none;
     background-color: var(--color-primary-700);
-    color: var(--color-white);
+    border-style: none;
+    border-radius: var(--radius-md);
     &:is(a, button, [role="button"]):hover {
@@ -409,11 +434,11 @@ filter: brightness(90%);
       display: flex;
+      align-items: center;
       justify-content: center;
-      align-items: center;
+      width: calc(var(--spacing) * 2);
+      height: calc(var(--spacing) * 2);
       margin-inline-start: calc(var(--spacing) * 2);
       background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20320%20512%22%3E%3Cpath%20fill=%22%23fff%22%20d=%22M193.94%20256L296.5%20153.44l21.15-21.15c3.12-3.12%203.12-8.19%200-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31%200L160%20222.06%2036.29%2098.34c-3.12-3.12-8.19-3.12-11.31%200L2.34%20120.97c-3.12%203.12-3.12%208.19%200%2011.31L126.06%20256%202.34%20379.71c-3.12%203.12-3.12%208.19%200%2011.31l22.63%2022.63c3.12%203.12%208.19%203.12%2011.31%200L160%20289.94%20262.56%20392.5l21.15%2021.15c3.12%203.12%208.19%203.12%2011.31%200l22.63-22.63c3.12-3.12%203.12-8.19%200-11.31L193.94%20256z%22%20%3E%3C/path%3E%3C/svg%3E");
+      background-repeat: no-repeat;
       background-position: center;
-      background-repeat: no-repeat;
       background-size: calc(var(--spacing-relative) * 4) calc(var(--spacing-relative) * 4);
-      width: calc(var(--spacing) * 2);
-      height: calc(var(--spacing) * 2);
     }
@@ -424,33 +449,34 @@ }
   .jumpu-icon-button {
+    position: relative;
     display: inline-flex;
+    align-items: center;
     justify-content: center;
-    align-items: center;
+    width: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 8);
     color: var(--color-gray-600);
     border-radius: var(--radius-md);
-    width: calc(var(--spacing) * 8);
-    height: calc(var(--spacing) * 8);
-    position: relative;
     [role="tooltip"] {
-      transform: translate(-50%, -110%) scale(0);
+      position: absolute;
+      top: 0;
+      left: 50%;
       display: inline-flex;
-      left: 50%;
-      top: 0;
-      position: absolute;
-      transition: 100ms;
-      opacity: 0;
-      background-color: var(--color-gray-500);
       padding-block: calc(var(--spacing) * 1);
       padding-inline: calc(var(--spacing) * 2);
-      border-radius: var(--radius-sm);
       font-size: var(--text-xs);
+      line-height: var(--leading-tight);
+      color: var(--color-white);
       white-space: nowrap;
-      color: var(--color-white);
-      line-height: var(--leading-tight);
+      background-color: var(--color-gray-500);
+      border-radius: var(--radius-sm);
+      opacity: 0;
+      transform: translate(-50%, -110%) scale(0);
+      transition-duration: 100ms;
+      transition-property: transform;
     }
     &:hover {
+      color: var(--color-gray-800);
       background-color: var(--color-gray-50);
-      color: var(--color-gray-800);
       [role="tooltip"] {
+        opacity: 1;
         transform: translate(-50%, -110%) scale(1);
-        opacity: 1;
       }
@@ -466,9 +492,9 @@ }
     &:is( :not([type]), [type="text"], [type="email"], [type="url"], [type="password"], [type="number"], [type="date"], [type="datetime-local"], [type="month"], [type="search"], [type="tel"], [type="time"], [type="week"] ) {
+      padding-block: calc(var(--spacing-relative) * 2);
+      padding-inline: calc(var(--spacing-relative) * 3);
+      color: var(--color-gray-900);
       appearance: none;
-      border-radius: var(--radius-md);
       border-color: var(--color-gray-300);
       border-width: 1px;
-      color: var(--color-gray-900);
-      padding-block: calc(var(--spacing-relative) * 2);
-      padding-inline: calc(var(--spacing-relative) * 3);
+      border-radius: var(--radius-md);
       &::placeholder {
@@ -482,16 +508,17 @@ color: var(--color-gray-300);
     &[type="checkbox"], &[type="radio"] {
-      appearance: none;
-      padding: 0;
-      print-color-adjust: exact;
       display: inline-block;
-      vertical-align: middle;
-      background-origin: border-box;
-      user-select: none;
       flex-shrink: 0;
       width: calc(var(--spacing) * 4);
       height: calc(var(--spacing) * 4);
+      padding-block: 0;
+      padding-inline: 0;
+      vertical-align: middle;
       color: var(--color-primary-700);
+      appearance: none;
+      user-select: none;
       background-color: var(--color-white);
+      background-origin: border-box;
       border-color: var(--color-gray-300);
       border-width: 1px;
+      print-color-adjust: exact;
     }
@@ -514,7 +541,7 @@ &[type="checkbox"] {
     &:is([type="checkbox"], [type="radio"]):checked, &[type="checkbox"]:indeterminate {
-      border-color: transparent;
       background-color: currentcolor;
+      background-repeat: no-repeat;
+      background-position: center;
       background-size: 100% 100%;
-      background-position: center;
-      background-repeat: no-repeat;
+      border-color: transparent;
     }
@@ -544,18 +571,18 @@ &[type="checkbox"]:checked {
   .jumpu-outlined-button {
-    appearance: none;
-    border-radius: var(--radius-md);
     display: inline-block;
     padding-block: calc(var(--spacing-relative) * 2.5);
     padding-inline: calc(var(--spacing-relative) * 5);
-    text-decoration: none;
+    color: var(--color-primary-700);
+    text-decoration-line: none;
+    appearance: none;
     background-color: transparent;
-    color: var(--color-primary-700);
     border-color: var(--color-primary-700);
     border-width: 1px;
+    border-radius: var(--radius-md);
     &:hover {
-      background: var(--color-primary-100);
+      background-color: var(--color-primary-100);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
       filter: brightness(120%);
       --tw-ring-shadow: 0 0 0 calc(3px + var(--tw-ring-offset-width))
       var(--tw-ring-color, transparent);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
@@ -573,4 +600,4 @@ &:active {
       &:hover {
+        box-shadow: none;
         filter: none;
-        box-shadow: none;
       }
@@ -582,9 +609,15 @@ }
   .jumpu-select {
+    padding-block: calc(var(--spacing-relative) * 2);
+    padding-inline: calc(var(--spacing-relative) * 3);
+    padding-inline-end: calc(var(--spacing) * 10);
+    color: var(--color-gray-900);
     appearance: none;
-    border-radius: var(--radius-md);
+    background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20fill=%22none%22%20viewBox=%220%200%2020%2020%22%3E%3Cpath%20stroke=%22oklch(0.551%200.027%20264.364)%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20stroke-width=%221.5%22%20d=%22M6%208l4%204%204-4%22/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right calc(var(--spacing) * 2) center;
+    background-size: calc(var(--spacing-relative) * 6);
     border-color: var(--color-gray-300);
     border-width: 1px;
-    color: var(--color-gray-900);
-    padding-block: calc(var(--spacing-relative) * 2);
-    padding-inline: calc(var(--spacing-relative) * 3);
+    border-radius: var(--radius-md);
+    print-color-adjust: exact;
     &::placeholder {
@@ -596,14 +629,8 @@ color: var(--color-gray-300);
     }
-    background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20fill=%22none%22%20viewBox=%220%200%2020%2020%22%3E%3Cpath%20stroke=%22oklch(0.551%200.027%20264.364)%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20stroke-width=%221.5%22%20d=%22M6%208l4%204%204-4%22/%3E%3C/svg%3E");
-    background-position: right calc(var(--spacing) * 2) center;
-    background-repeat: no-repeat;
-    background-size: calc(var(--spacing-relative) * 6);
-    padding-inline-end: calc(var(--spacing) * 10);
-    print-color-adjust: exact;
     &[multiple] {
+      padding-inline-end: calc(var(--spacing) * 3);
       background-image: initial;
+      background-repeat: unset;
       background-position: initial;
-      background-repeat: unset;
       background-size: initial;
-      padding-inline-end: calc(var(--spacing) * 3);
       print-color-adjust: unset;
@@ -615,18 +642,24 @@ }
   .jumpu-spinner {
-    text-align: center;
     width: calc(var(--spacing) * 12);
     height: calc(var(--spacing) * 12);
+    text-align: center;
     svg {
+      width: 100%;
       height: 100%;
-      width: 100%;
-      animation: spinner-rotate 2s linear infinite;
       stroke: currentcolor;
+      animation-name: spinner-rotate;
+      animation-duration: 2s;
+      animation-timing-function: linear;
+      animation-iteration-count: infinite;
     }
     circle {
-      animation: spinner-dash 1.5s ease-in-out infinite;
+      fill: none;
+      stroke-width: 2;
+      stroke-linecap: round;
       stroke-dasharray: 90, 150;
       stroke-dashoffset: 0;
-      stroke-width: 2;
-      stroke-linecap: round;
-      fill: none;
+      animation-name: spinner-dash;
+      animation-duration: 1.5s;
+      animation-timing-function: ease-in-out;
+      animation-iteration-count: infinite;
     }
@@ -656,11 +689,11 @@ }
   .jumpu-tabs {
-    white-space: nowrap;
     overflow-x: auto;
     overflow-y: hidden;
+    white-space: nowrap;
     [role="tablist"] {
       display: flex;
-      align-items: center;
+      flex-grow: 1;
       flex-shrink: 0;
-      flex-grow: 1;
       gap: calc(var(--spacing) * 2);
+      align-items: center;
       border-color: var(--color-gray-300);
@@ -670,16 +703,16 @@ border-bottom-width: 1px;
     [role="tab"] {
+      padding-block: calc(var(--spacing-relative) * 2.5);
+      padding-inline: calc(var(--spacing-relative) * 3.5);
+      margin-block-end: -1px;
       border-color: var(--color-gray-300);
       border-bottom-width: 1px;
-      margin-block-end: -1px;
-      padding-block: calc(var(--spacing-relative) * 2.5);
-      padding-inline: calc(var(--spacing-relative) * 3.5);
       &:hover {
+        border-color: var(--color-gray-400);
         border-bottom-width: 1px;
-        border-color: var(--color-gray-400);
       }
       &[aria-selected="true"] {
+        color: var(--color-primary-700);
+        border-bottom-color: var(--color-primary-700);
+        border-bottom-style: solid;
         border-bottom-width: 1px;
-        border-bottom-style: solid;
-        border-bottom-color: var(--color-primary-700);
-        color: var(--color-primary-700);
         &:hover {
@@ -698,13 +731,13 @@ border-bottom-color: var(--color-primary-800);
     display: inline-flex;
+    align-items: center;
     justify-content: center;
-    align-items: center;
     padding-block: calc(var(--spacing) * 1);
     padding-inline: calc(var(--spacing) * 3);
     font-size: var(--text-xs);
+    line-height: var(--text-xs--line-height);
+    text-decoration-line: none;
+    background-color: var(--color-gray-100);
+    border-color: var(--color-gray-100);
+    border-width: 1px;
     border-radius: var(--radius-md);
-    border-width: 1px;
-    border-color: var(--color-gray-100);
-    background-color: var(--color-gray-100);
-    text-decoration: none;
-    line-height: var(--text-xs--line-height);
     &:is(a, button, [role="button"]):hover {
@@ -718,11 +751,11 @@ border-color: var(--color-gray-300);
       display: flex;
+      align-items: center;
       justify-content: center;
-      align-items: center;
+      width: calc(var(--spacing) * 2);
+      height: calc(var(--spacing) * 2);
       margin-inline-start: calc(var(--spacing) * 2);
       background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20320%20512%22%3E%3Cpath%20fill=%22oklch(0.21%200.034%20264.665)%22%20d=%22M193.94%20256L296.5%20153.44l21.15-21.15c3.12-3.12%203.12-8.19%200-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31%200L160%20222.06%2036.29%2098.34c-3.12-3.12-8.19-3.12-11.31%200L2.34%20120.97c-3.12%203.12-3.12%208.19%200%2011.31L126.06%20256%202.34%20379.71c-3.12%203.12-3.12%208.19%200%2011.31l22.63%2022.63c3.12%203.12%208.19%203.12%2011.31%200L160%20289.94%20262.56%20392.5l21.15%2021.15c3.12%203.12%208.19%203.12%2011.31%200l22.63-22.63c3.12-3.12%203.12-8.19%200-11.31L193.94%20256z%22%20class=%22%22%3E%3C/path%3E%3C/svg%3E");
+      background-repeat: no-repeat;
       background-position: center;
-      background-repeat: no-repeat;
       background-size: calc(var(--spacing-relative) * 4) calc(var(--spacing-relative) * 4);
-      width: calc(var(--spacing) * 2);
-      height: calc(var(--spacing) * 2);
     }
@@ -733,13 +766,13 @@ }
   .jumpu-text-button {
-    appearance: none;
-    border-radius: var(--radius-md);
     display: inline-block;
     padding-block: calc(var(--spacing-relative) * 2.5);
     padding-inline: calc(var(--spacing-relative) * 5);
-    text-decoration: none;
+    color: var(--color-primary-700);
+    text-decoration-line: none;
+    appearance: none;
     background-color: transparent;
     border-color: transparent;
-    color: var(--color-primary-700);
+    border-radius: var(--radius-md);
     &:hover {
-      background: var(--color-primary-100);
+      background-color: var(--color-primary-100);
     }
@@ -757,4 +790,4 @@ &:active {
       &:hover {
+        box-shadow: none;
         filter: none;
-        box-shadow: none;
       }
@@ -766,9 +799,9 @@ }
   .jumpu-textarea {
+    padding-block: calc(var(--spacing-relative) * 2);
+    padding-inline: calc(var(--spacing-relative) * 3);
+    color: var(--color-gray-900);
     appearance: none;
-    border-radius: var(--radius-md);
     border-color: var(--color-gray-300);
     border-width: 1px;
-    color: var(--color-gray-900);
-    padding-block: calc(var(--spacing-relative) * 2);
-    padding-inline: calc(var(--spacing-relative) * 3);
+    border-radius: var(--radius-md);
     &::placeholder {
@@ -787,27 +820,29 @@ color: var(--color-gray-300);
       position: absolute;
+      top: 0;
       left: 0;
-      top: 0;
+      z-index: 5;
       width: 100%;
       height: 100%;
-      z-index: 5;
       opacity: 0;
     }
     label {
+      position: relative;
+      box-sizing: border-box;
+      display: inline-block;
       width: 100%;
       height: 100%;
       background-color: var(--color-gray-300);
-      position: relative;
-      display: inline-block;
       border-radius: calc(infinity * 1px);
-      transition: 100ms;
-      box-sizing: border-box;
+      transition-duration: 100ms;
+      transition-property: background-color;
       span {
         position: absolute;
-        border-radius: calc(infinity * 1px);
+        top: 0;
         left: 0;
-        top: 0;
         z-index: 2;
         background-color: var(--color-white);
+        border-radius: calc(infinity * 1px);
         box-shadow: 0 0 5px rgb(0 0 0 / 20%);
-        transition: 100ms;
+        transition-duration: 100ms;
+        transition-property: transform;
       }
@@ -823,1 +858,11 @@ }
 }
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}

package.json

 {
   "name": "@jumpu-ui/tailwindcss",
   "description": "A Tailwind CSS plugin of Jumpu UI implementation.",
-  "version": "2.0.0-alpha.2",
+  "version": "2.0.0-alpha.3",
   "author": "tuqulore inc.",
@@ -14,2 +14,3 @@ "bugs": {
     "stylelint": "16.15.0",
+    "stylelint-config-recess-order": "6.0.0",
     "stylelint-config-standard": "37.0.0",
@@ -27,3 +28,4 @@ "tailwindcss": "4.0.14",
       "browser": "./dist/*"
-    }
+    },
+    "./package.json": "./package.json"
   },
@@ -47,3 +49,3 @@ "homepage": "https://github.com/tuqulore/jumpu-ui#readme",
   "type": "module",
-  "gitHead": "ea4d9e60f9bd9ee9ece2dfd51a46c9e44212c094"
+  "gitHead": "17f4d88c65a83e6af2c9abc66a5f90acf9bcfa9a"
 }

src/components/accordion.css

 .jumpu-accordion {
   > [aria-expanded] {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
     width: 100%;
     padding-block: --spacing(3);
     padding-inline: --spacing(4);
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
     border-color: var(--color-gray-300);
     border-width: 1px;
     &::before {
-      content: "";
       display: block;
-      transition: 500ms;
       width: --spacing(4);
       height: --spacing(4);
       margin-inline-end: --spacing(2);
+      content: "";
       background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20448%20512%22%3E%3Cpath%20d=%22M443.5%20162.6l-7.1-7.1c-4.7-4.7-12.3-4.7-17%200L224%20351%2028.5%20155.5c-4.7-4.7-12.3-4.7-17%200l-7.1%207.1c-4.7%204.7-4.7%2012.3%200%2017l211%20211.1c4.7%204.7%2012.3%204.7%2017%200l211-211.1c4.8-4.7%204.8-12.3.1-17z%22%3E%3C/path%3E%3C/svg%3E");
+      background-repeat: no-repeat;
       background-position: center;
-      background-repeat: no-repeat;
       background-size: --spacing(4);
+      transition-duration: 500ms;
+      transition-property: transform;
     }
@@ -36,4 +37,5 @@ &:hover {
   > [aria-hidden] {
-    transition: 200ms;
-    overflow: hidden;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    transition-duration: 200ms;
     &[aria-hidden="true"] {
@@ -40,0 +42,0 @@ display: none;

src/components/avatar.css

 .jumpu-avatar {
-  overflow: hidden;
-  border-radius: calc(infinity * 1px);
   width: --spacing(16);
   height: --spacing(16);
+  overflow-x: hidden;
+  overflow-y: hidden;
+  border-radius: calc(infinity * 1px);
   img {
@@ -7,0 +8,0 @@ width: 100%;

src/components/badge.css

 .jumpu-badge {
   display: inline-flex;
+  align-items: center;
   justify-content: center;
-  align-items: center;
   padding-block: --spacing(1);
   padding-inline: --spacing(3);
   font-size: var(--text-sm);
+  font-weight: bold;
+  text-decoration-line: none;
   border-radius: calc(infinity * 1px);
-  text-decoration: none;
-  font-weight: bold;
 }

src/components/balloon.css

@@ -8,4 +8,4 @@ .jumpu-balloon {
   a {
-    text-decoration: underline;
+    text-decoration-line: underline;
   }
 }

src/components/boxed-tabs.css

 .jumpu-boxed-tabs {
-  white-space: nowrap;
   overflow-x: auto;
   overflow-y: hidden;
+  white-space: nowrap;
   [role="tablist"] {
     display: flex;
-    align-items: center;
+    flex-grow: 1;
     flex-shrink: 0;
-    flex-grow: 1;
     gap: --spacing(2);
+    align-items: center;
     border-color: var(--color-gray-300);
@@ -15,18 +15,18 @@ border-bottom-width: 1px;
   [role="tab"] {
+    padding-block: calc(var(--spacing-relative) * 1.5);
+    padding-inline: calc(var(--spacing-relative) * 5);
     margin-bottom: -1px;
+    border-color: transparent;
     border-width: 1px;
-    border-color: transparent;
     border-start-start-radius: var(--radius-md);
     border-start-end-radius: var(--radius-md);
-    padding-block: calc(var(--spacing-relative) * 1.5);
-    padding-inline: calc(var(--spacing-relative) * 5);
     &[aria-selected="true"] {
-      border-color: var(--color-gray-300);
-      background-color: var(--color-white);
-      border-bottom-color: transparent;
       position: relative;
       padding-block-start: calc(var(--spacing-relative) * 2);
       padding-block-end: calc(var(--spacing-relative) * 1.5);
+      background-color: var(--color-white);
+      border-color: var(--color-gray-300);
+      border-bottom-color: transparent;
     }
   }
 }

src/components/button.css

 .jumpu-button {
-  appearance: none;
-  border-radius: var(--radius-md);
   display: inline-block;
   padding-block: calc(var(--spacing-relative) * 2.5);
   padding-inline: calc(var(--spacing-relative) * 5);
-  text-decoration: none;
+  color: var(--color-white);
+  text-decoration-line: none;
+  appearance: none;
   background-color: var(--color-primary-700);
-  color: var(--color-white);
+  border-radius: var(--radius-md);
+  transition-timing-function: cubic-bezier(0, 0, 0.12, 1);
   transition-duration: 30ms;
   transition-property: filter;
-  transition-timing-function: cubic-bezier(0, 0, 0.12, 1);
   &:hover {
@@ -27,6 +27,6 @@ filter: brightness(90%);
     &:hover {
+      box-shadow: none;
       filter: none;
-      box-shadow: none;
     }
   }
 }

src/components/card.css

 .jumpu-card {
+  overflow-x: hidden;
+  overflow-y: hidden;
   background-color: var(--color-white);
-  border-radius: var(--radius-md);
-  overflow: hidden;
   border-color: var(--color-gray-300);
   border-width: 1px;
+  border-radius: var(--radius-md);
 }

src/components/filled-tag.css

 .jumpu-filled-tag {
   display: inline-flex;
+  align-items: center;
   justify-content: center;
-  align-items: center;
   padding-block: --spacing(1);
   padding-inline: --spacing(3);
   font-size: var(--text-xs);
-  border-radius: var(--radius-md);
-  text-decoration: none;
   line-height: var(--text-xs--line-height);
-  border: none;
+  color: var(--color-white);
+  text-decoration-line: none;
   background-color: var(--color-primary-700);
-  color: var(--color-white);
+  border-style: none;
+  border-radius: var(--radius-md);
   &:is(a, button, [role="button"]):hover {
@@ -22,13 +22,13 @@ filter: brightness(90%);
     display: flex;
+    align-items: center;
     justify-content: center;
-    align-items: center;
+    width: --spacing(2);
+    height: --spacing(2);
     margin-inline-start: --spacing(2);
     background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20320%20512%22%3E%3Cpath%20fill=%22%23fff%22%20d=%22M193.94%20256L296.5%20153.44l21.15-21.15c3.12-3.12%203.12-8.19%200-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31%200L160%20222.06%2036.29%2098.34c-3.12-3.12-8.19-3.12-11.31%200L2.34%20120.97c-3.12%203.12-3.12%208.19%200%2011.31L126.06%20256%202.34%20379.71c-3.12%203.12-3.12%208.19%200%2011.31l22.63%2022.63c3.12%203.12%208.19%203.12%2011.31%200L160%20289.94%20262.56%20392.5l21.15%2021.15c3.12%203.12%208.19%203.12%2011.31%200l22.63-22.63c3.12-3.12%203.12-8.19%200-11.31L193.94%20256z%22%20%3E%3C/path%3E%3C/svg%3E");
+    background-repeat: no-repeat;
     background-position: center;
-    background-repeat: no-repeat;
     background-size: calc(var(--spacing-relative) * 4)
       calc(var(--spacing-relative) * 4);
-    width: --spacing(2);
-    height: --spacing(2);
   }
 }

src/components/icon-button.css

 .jumpu-icon-button {
+  position: relative;
   display: inline-flex;
+  align-items: center;
   justify-content: center;
-  align-items: center;
+  width: --spacing(8);
+  height: --spacing(8);
   color: var(--color-gray-600);
   border-radius: var(--radius-md);
-  width: --spacing(8);
-  height: --spacing(8);
-  position: relative;
   [role="tooltip"] {
-    transform: translate(-50%, -110%) scale(0);
+    position: absolute;
+    top: 0;
+    left: 50%;
     display: inline-flex;
-    left: 50%;
-    top: 0;
-    position: absolute;
-    transition: 100ms;
-    opacity: 0;
-    background-color: var(--color-gray-500);
     padding-block: --spacing(1);
     padding-inline: --spacing(2);
-    border-radius: var(--radius-sm);
     font-size: var(--text-xs);
+    line-height: var(--leading-tight);
+    color: var(--color-white);
     white-space: nowrap;
-    color: var(--color-white);
-    line-height: var(--leading-tight);
+    background-color: var(--color-gray-500);
+    border-radius: var(--radius-sm);
+    opacity: 0;
+    transform: translate(-50%, -110%) scale(0);
+    transition-duration: 100ms;
+    transition-property: transform;
   }
   &:hover {
+    color: var(--color-gray-800);
     background-color: var(--color-gray-50);
-    color: var(--color-gray-800);
     [role="tooltip"] {
+      opacity: 1;
       transform: translate(-50%, -110%) scale(1);
-      opacity: 1;
     }
@@ -34,0 +35,0 @@ }

src/components/input.css

@@ -17,9 +17,9 @@ .jumpu-input {
     ) {
+    padding-block: calc(var(--spacing-relative) * 2);
+    padding-inline: calc(var(--spacing-relative) * 3);
+    color: var(--color-gray-900);
     appearance: none;
-    border-radius: var(--radius-md);
     border-color: var(--color-gray-300);
     border-width: 1px;
-    color: var(--color-gray-900);
-    padding-block: calc(var(--spacing-relative) * 2);
-    padding-inline: calc(var(--spacing-relative) * 3);
+    border-radius: var(--radius-md);
     &::placeholder {
@@ -34,16 +34,17 @@ color: var(--color-gray-300);
   &[type="radio"] {
-    appearance: none;
-    padding: 0;
-    print-color-adjust: exact;
     display: inline-block;
-    vertical-align: middle;
-    background-origin: border-box;
-    user-select: none;
     flex-shrink: 0;
     width: --spacing(4);
     height: --spacing(4);
+    padding-block: 0;
+    padding-inline: 0;
+    vertical-align: middle;
     color: var(--color-primary-700);
+    appearance: none;
+    user-select: none;
     background-color: var(--color-white);
+    background-origin: border-box;
     border-color: var(--color-gray-300);
     border-width: 1px;
+    print-color-adjust: exact;
   }
@@ -69,7 +70,7 @@ &[type="checkbox"] {
   &[type="checkbox"]:indeterminate {
-    border-color: transparent;
     background-color: currentcolor;
+    background-repeat: no-repeat;
+    background-position: center;
     background-size: 100% 100%;
-    background-position: center;
-    background-repeat: no-repeat;
+    border-color: transparent;
   }
@@ -76,0 +77,0 @@ &[type="checkbox"]:checked {

src/components/outlined-button.css

 .jumpu-outlined-button {
-  appearance: none;
-  border-radius: var(--radius-md);
   display: inline-block;
   padding-block: calc(var(--spacing-relative) * 2.5);
   padding-inline: calc(var(--spacing-relative) * 5);
-  text-decoration: none;
+  color: var(--color-primary-700);
+  text-decoration-line: none;
+  appearance: none;
   background-color: transparent;
-  color: var(--color-primary-700);
   border-color: var(--color-primary-700);
   border-width: 1px;
+  border-radius: var(--radius-md);
   &:hover {
-    background: var(--color-primary-100);
+    background-color: var(--color-primary-100);
+    box-shadow:
+      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     filter: brightness(120%);
     --tw-ring-shadow: 0 0 0 calc(3px + var(--tw-ring-offset-width))
       var(--tw-ring-color, transparent);
-    box-shadow:
-      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
-      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
@@ -32,6 +32,6 @@ &:active {
     &:hover {
+      box-shadow: none;
       filter: none;
-      box-shadow: none;
     }
   }
 }

src/components/select.css

 .jumpu-select {
+  padding-block: calc(var(--spacing-relative) * 2);
+  padding-inline: calc(var(--spacing-relative) * 3);
+  padding-inline-end: --spacing(10);
+  color: var(--color-gray-900);
   appearance: none;
-  border-radius: var(--radius-md);
+  background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20fill=%22none%22%20viewBox=%220%200%2020%2020%22%3E%3Cpath%20stroke=%22oklch(0.551%200.027%20264.364)%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20stroke-width=%221.5%22%20d=%22M6%208l4%204%204-4%22/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right --spacing(2) center;
+  background-size: calc(var(--spacing-relative) * 6);
   border-color: var(--color-gray-300);
   border-width: 1px;
-  color: var(--color-gray-900);
-  padding-block: calc(var(--spacing-relative) * 2);
-  padding-inline: calc(var(--spacing-relative) * 3);
+  border-radius: var(--radius-md);
+  print-color-adjust: exact;
   &::placeholder {
@@ -15,16 +21,10 @@ color: var(--color-gray-300);
   }
-  background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20fill=%22none%22%20viewBox=%220%200%2020%2020%22%3E%3Cpath%20stroke=%22oklch(0.551%200.027%20264.364)%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20stroke-width=%221.5%22%20d=%22M6%208l4%204%204-4%22/%3E%3C/svg%3E");
-  background-position: right --spacing(2) center;
-  background-repeat: no-repeat;
-  background-size: calc(var(--spacing-relative) * 6);
-  padding-inline-end: --spacing(10);
-  print-color-adjust: exact;
   &[multiple] {
+    padding-inline-end: --spacing(3);
     background-image: initial;
+    background-repeat: unset;
     background-position: initial;
-    background-repeat: unset;
     background-size: initial;
-    padding-inline-end: --spacing(3);
     print-color-adjust: unset;
   }
 }

src/components/spinner.css

 .jumpu-spinner {
-  text-align: center;
   width: --spacing(12);
   height: --spacing(12);
+  text-align: center;
   svg {
+    width: 100%;
     height: 100%;
-    width: 100%;
-    animation: spinner-rotate 2s linear infinite;
     stroke: currentcolor;
+    animation-name: spinner-rotate;
+    animation-duration: 2s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
   }
   circle {
-    animation: spinner-dash 1.5s ease-in-out infinite;
+    fill: none;
+    stroke-width: 2;
+    stroke-linecap: round;
     stroke-dasharray: 90, 150;
     stroke-dashoffset: 0;
-    stroke-width: 2;
-    stroke-linecap: round;
-    fill: none;
+    animation-name: spinner-dash;
+    animation-duration: 1.5s;
+    animation-timing-function: ease-in-out;
+    animation-iteration-count: infinite;
   }
@@ -19,0 +25,0 @@ }

src/components/tabs.css

 .jumpu-tabs {
-  white-space: nowrap;
   overflow-x: auto;
   overflow-y: hidden;
+  white-space: nowrap;
   [role="tablist"] {
     display: flex;
-    align-items: center;
+    flex-grow: 1;
     flex-shrink: 0;
-    flex-grow: 1;
     gap: --spacing(2);
+    align-items: center;
     border-color: var(--color-gray-300);
@@ -15,16 +15,16 @@ border-bottom-width: 1px;
   [role="tab"] {
+    padding-block: calc(var(--spacing-relative) * 2.5);
+    padding-inline: calc(var(--spacing-relative) * 3.5);
+    margin-block-end: -1px;
     border-color: var(--color-gray-300);
     border-bottom-width: 1px;
-    margin-block-end: -1px;
-    padding-block: calc(var(--spacing-relative) * 2.5);
-    padding-inline: calc(var(--spacing-relative) * 3.5);
     &:hover {
+      border-color: var(--color-gray-400);
       border-bottom-width: 1px;
-      border-color: var(--color-gray-400);
     }
     &[aria-selected="true"] {
+      color: var(--color-primary-700);
+      border-bottom-color: var(--color-primary-700);
+      border-bottom-style: solid;
       border-bottom-width: 1px;
-      border-bottom-style: solid;
-      border-bottom-color: var(--color-primary-700);
-      color: var(--color-primary-700);
       &:hover {
@@ -31,0 +31,0 @@ border-bottom-color: var(--color-primary-800);

src/components/tag.css

 .jumpu-tag {
   display: inline-flex;
+  align-items: center;
   justify-content: center;
-  align-items: center;
   padding-block: --spacing(1);
   padding-inline: --spacing(3);
   font-size: var(--text-xs);
+  line-height: var(--text-xs--line-height);
+  text-decoration-line: none;
+  background-color: var(--color-gray-100);
+  border-color: var(--color-gray-100);
+  border-width: 1px;
   border-radius: var(--radius-md);
-  border-width: 1px;
-  border-color: var(--color-gray-100);
-  background-color: var(--color-gray-100);
-  text-decoration: none;
-  line-height: var(--text-xs--line-height);
   &:is(a, button, [role="button"]):hover {
@@ -22,13 +22,13 @@ border-color: var(--color-gray-300);
     display: flex;
+    align-items: center;
     justify-content: center;
-    align-items: center;
+    width: --spacing(2);
+    height: --spacing(2);
     margin-inline-start: --spacing(2);
     background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20320%20512%22%3E%3Cpath%20fill=%22oklch(0.21%200.034%20264.665)%22%20d=%22M193.94%20256L296.5%20153.44l21.15-21.15c3.12-3.12%203.12-8.19%200-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31%200L160%20222.06%2036.29%2098.34c-3.12-3.12-8.19-3.12-11.31%200L2.34%20120.97c-3.12%203.12-3.12%208.19%200%2011.31L126.06%20256%202.34%20379.71c-3.12%203.12-3.12%208.19%200%2011.31l22.63%2022.63c3.12%203.12%208.19%203.12%2011.31%200L160%20289.94%20262.56%20392.5l21.15%2021.15c3.12%203.12%208.19%203.12%2011.31%200l22.63-22.63c3.12-3.12%203.12-8.19%200-11.31L193.94%20256z%22%20class=%22%22%3E%3C/path%3E%3C/svg%3E");
+    background-repeat: no-repeat;
     background-position: center;
-    background-repeat: no-repeat;
     background-size: calc(var(--spacing-relative) * 4)
       calc(var(--spacing-relative) * 4);
-    width: --spacing(2);
-    height: --spacing(2);
   }
 }

src/components/text-button.css

 .jumpu-text-button {
-  appearance: none;
-  border-radius: var(--radius-md);
   display: inline-block;
   padding-block: calc(var(--spacing-relative) * 2.5);
   padding-inline: calc(var(--spacing-relative) * 5);
-  text-decoration: none;
+  color: var(--color-primary-700);
+  text-decoration-line: none;
+  appearance: none;
   background-color: transparent;
   border-color: transparent;
-  color: var(--color-primary-700);
+  border-radius: var(--radius-md);
   &:hover {
-    background: var(--color-primary-100);
+    background-color: var(--color-primary-100);
   }
@@ -25,6 +25,6 @@ &:active {
     &:hover {
+      box-shadow: none;
       filter: none;
-      box-shadow: none;
     }
   }
 }

src/components/textarea.css

 .jumpu-textarea {
+  padding-block: calc(var(--spacing-relative) * 2);
+  padding-inline: calc(var(--spacing-relative) * 3);
+  color: var(--color-gray-900);
   appearance: none;
-  border-radius: var(--radius-md);
   border-color: var(--color-gray-300);
   border-width: 1px;
-  color: var(--color-gray-900);
-  padding-block: calc(var(--spacing-relative) * 2);
-  padding-inline: calc(var(--spacing-relative) * 3);
+  border-radius: var(--radius-md);
   &::placeholder {
@@ -10,0 +10,0 @@ color: var(--color-gray-300);

src/components/toggle-switch.css

@@ -5,27 +5,29 @@ .jumpu-toggle-switch {
     position: absolute;
+    top: 0;
     left: 0;
-    top: 0;
+    z-index: 5;
     width: 100%;
     height: 100%;
-    z-index: 5;
     opacity: 0;
   }
   label {
+    position: relative;
+    box-sizing: border-box;
+    display: inline-block;
     width: 100%;
     height: 100%;
     background-color: var(--color-gray-300);
-    position: relative;
-    display: inline-block;
     border-radius: calc(infinity * 1px);
-    transition: 100ms;
-    box-sizing: border-box;
+    transition-duration: 100ms;
+    transition-property: background-color;
     span {
       position: absolute;
-      border-radius: calc(infinity * 1px);
+      top: 0;
       left: 0;
-      top: 0;
       z-index: 2;
       background-color: var(--color-white);
+      border-radius: calc(infinity * 1px);
       box-shadow: 0 0 5px rgb(0 0 0 / 20%);
-      transition: 100ms;
+      transition-duration: 100ms;
+      transition-property: transform;
     }
@@ -32,0 +34,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

50222

4.59%

Lines of code

1471

4.25%

Worsened metrics

Dev dependency count

8

14.29%

No dependency changes