@newlogic-digital/ui 3.2.0 → 3.4.2

package/src/styles/Components/Dialog/Default.css

@@ -1,49 +1,35 @@
 .c-dialog {
-  --c-dialog-py: 1rem;
+  --c-dialog-py: 1.5rem;
   --c-dialog-px: 1.5rem;
-  --c-dialog-offset-y: 2rem;
+  --c-dialog-width: 40rem;
+  --c-dialog-animation-duration: 0.3s;
 
-  animation: 0.3s ease 0s backwards 1 fade-in-down;
+  animation: var(--c-dialog-animation-duration) ease 0s backwards 1 fade-in-down;
   position: relative;
-  z-index: var(--z-30);
-  display: flex;
-  flex-direction: column;
-  margin-left: auto;
-  margin-right: auto;
-  pointer-events: none;
-  min-height: 100%;
-  align-self: baseline;
-  border-top: var(--c-dialog-offset-y) solid transparent;
-  border-bottom: var(--c-dialog-offset-y) solid transparent;
-  width: calc(100% - 2rem);
+  z-index: var(--z-20);
+  margin: auto;
+  background-color: rgb(var(--color-background));
+  width: 100%;
+  max-width: var(--c-dialog-width);
+  border-radius: var(--rounded-md);
+  padding: var(--c-dialog-py) var(--c-dialog-px);
 
-  @nest :--state-hiding & {
-    animation: 0.3s ease 0s forwards 1 fade-out-up;
-  }
-
-  @media (--media-t) {
-    --c-dialog-offset-y: 4rem;
-
-    width: 100%;
-    min-width: 18.75rem;
-    max-width: 40rem;
+  @nest dialog:not([open]) & {
+    animation: var(--c-dialog-animation-duration) ease 0s forwards 1 fade-out-up;
   }
 
   &:--size-sm {
-    max-width: 31.25rem;
-  }
-
-  &:--size-base {
-    max-width: none;
-    width: auto;
+    --c-dialog-width: 32rem;
   }
 
   &:--size-lg {
-    max-width: 80rem;
+    --c-dialog-width: 80rem;
   }
 
   &:--type-scrollable {
     height: 100%;
+    display: flex;
+    flex-direction: column;
 
     & .wrp_dialog_body {
       flex: 1 1 auto;
@@ -54,25 +40,4 @@
       -webkit-overflow-scrolling: touch;
     }
   }
-
-  & .wrp_dialog {
-    position: relative;
-    background-color: rgb(var(--color-background));
-    pointer-events: auto;
-    border-radius: var(--radius);
-    padding: var(--c-dialog-py) var(--c-dialog-px);
-    display: flex;
-    flex-direction: column;
-    max-height: 100%;
-
-    @media (--media-t) {
-      --c-dialog-py: 1.25rem;
-    }
-  }
-
-  & .elm_dialog_close {
-    position: absolute;
-    right: 1rem;
-    top: 1rem;
-  }
 }

package/src/styles/Components/Dropdown/+.css

@@ -0,0 +1 @@
+@import "Default.css";

package/src/styles/{Ui/Dropdown.css → Components/Dropdown/Default.css}

@@ -1,4 +1,4 @@
-.ui-dropdown {
+.c-dropdown {
   padding: 1.25rem 1.5rem;
   overflow: hidden;
   max-width: 22rem;

package/src/styles/Layout/Main.css

@@ -4,26 +4,22 @@ html {
   scroll-behavior: smooth;
   accent-color: rgb(var(--color-accent));
 
-  @media (--media-min-400) {
+  @media (--media-sm) {
     font-size: 95%;
   }
 
-  @media (--media-min-768) {
+  @media not all and (--media-sm), (--media-md) {
     font-size: 90%;
   }
 
-  @media (--media-min-1360) {
+  @media (--media-2xl) {
     font-size: 100%;
   }
 
-  @media (--media-only-960) {
+  @media (max-width: 64em) and (--media-lg) {
     font-size: 80%;
   }
 
-  @media (--media-360) {
-    font-size: 90%;
-  }
-
   &.no-touch, &.no-touch * {
     scrollbar-color: rgb(var(--color-current) / 0.2) rgb(var(--color-background));
     scrollbar-width: thin;
@@ -97,15 +93,3 @@ body {
     }
   }
 }
-
-.container {
-  margin-left: auto;
-  margin-right: auto;
-  max-width: var(--container-width);
-  padding-left: var(--container-padding);
-  padding-right: var(--container-padding);
-
-  &:--size-sm {
-    --container: var(--container-width-sm);
-  }
-}

package/src/styles/Libraries/+.css

@@ -2,7 +2,6 @@
 @import "Dialog.css";
 @import "Drawer.css";
 @import "Hint.css";
-@import "Lazysizes.css";
 @import "NativeSlider.css";
 @import "Ripple.css";
 @import "Tabs.css";

package/src/styles/Libraries/Dialog.css

@@ -1,19 +1,35 @@
 .lib-dialog {
-  --lib-dialog-bg: var(--color-dark);
-  --lib-dialog-opacity: 0.8;
+  --lib-ripple-bg: rgb(var(--color-dark) / var(--tw-bg-opacity, 0.8));
+  --lib-dialog-py: 2rem;
+  --lib-dialog-px: 1.5rem;
+  --lib-dialog-animation-duration: 0.3s;
 
-  animation: 0.3s ease 0s backwards 1 fade-in;
   inset: 0;
   z-index: var(--z-30);
   position: fixed;
-  display: none;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
-  background-color: rgb(var(--lib-dialog-bg) / var(--lib-dialog-opacity));
+  background-color: var(--lib-ripple-bg);
   overscroll-behavior: contain;
+  display: flex;
+  visibility: hidden;
+  padding: var(--lib-dialog-py) var(--lib-dialog-px);
 
-  &:--state-hiding {
-    animation: 0.3s ease 0s forwards 1 fade-out;
+  &:not([open]) {
+    animation: var(--lib-dialog-animation-duration) ease 0s forwards 1 fade-out;
     pointer-events: none;
   }
+
+  &[open] {
+    animation: var(--lib-dialog-animation-duration) ease 0s backwards 1 fade-in;
+  }
+
+  @nest .is-lib-dialog-open & {
+    visibility: visible;
+  }
+}
+
+.is-lib-dialog-open {
+  overflow: hidden;
+  padding-right: var(--lib-dialog-scrollbar-width, 0);
 }

package/src/styles/Libraries/Drawer.css

@@ -5,10 +5,7 @@
   width: 100%;
   height: 100%;
   position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  inset: 0;
   overflow: hidden;
   display: flex;
   flex-direction: row;
@@ -26,7 +23,7 @@
     -ms-overflow-style: none;
 
     &:--state-active {
-      scroll-snap-type: x mandatory;
+      scroll-snap-type: x proximity;
     }
 
     &::-webkit-scrollbar {
@@ -37,10 +34,7 @@
 
   &::before {
     position: fixed;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    left: 0;
+    inset: 0;
     z-index: -1;
     background-color: rgb(var(--color-dark) / 0.6);
     content: "";

package/src/styles/Libraries/Hint.css

@@ -41,7 +41,7 @@
     will-change: transform;
     backface-visibility: hidden;
 
-    @nest :is(:hover, :focus)& {
+    @nest :is(:hover, :focus-visible)& {
       visibility: visible;
       opacity: 1;
       transition-delay: 100ms;
@@ -82,6 +82,7 @@
     line-height: 0.875rem;
     white-space: nowrap;
     box-shadow: 0.25rem 0.25rem 0.5rem rgb(var(--lib-hint-bg) / 0.15);
+    font-weight: var(--font-normal);
 
     @nest .lib-hint-light& {
       box-shadow: 0.25rem 0.25rem 0.5rem rgb(var(--color-dark) / 0.15);
@@ -120,7 +121,7 @@
       left: calc(50% - 0.375rem);
       margin-bottom: -0.6875rem;
 
-      @nest :is(:hover, :focus)& {
+      @nest :is(:hover, :focus-visible)& {
         transform: translateY(-0.5rem);
       }
     }
@@ -128,7 +129,7 @@
     &::after {
       transform: translateX(-50%);
 
-      @nest :is(:hover, :focus)& {
+      @nest :is(:hover, :focus-visible)& {
         transform: translateX(-50%) translateY(-0.5rem);
       }
     }

package/src/styles/Libraries/NativeSlider.css

@@ -45,6 +45,14 @@
   height: 0.75rem;
   border: 0.125rem solid rgb(var(--color-current));
   border-radius: 50%;
+  cursor: pointer;
+  position: relative;
+
+  &::after {
+    position: absolute;
+    inset: -0.5rem;
+    content: "";
+  }
 
   &[data-state*="active"] {
     background-color: rgb(var(--color-current));

package/src/styles/Libraries/Ripple.css

@@ -1,29 +1,16 @@
 [data-action*="lib#ripple"] {
-  --lib-ripple-bg: rgb(var(--color-background));
-
   position: relative;
   user-select: none;
 }
 
 .lib-ripple {
+  --lib-ripple-animation-duration: 1s;
+  --lib-ripple-bg: rgb(var(--color-background) / var(--tw-bg-opacity, 0.4));
+
   position: absolute;
   background: var(--lib-ripple-bg);
   border-radius: 50%;
   transform: scale(0);
-  opacity: 0.4;
+  animation-duration: var(--lib-ripple-animation-duration);
   pointer-events: none;
-
-  @nest body > & {
-    position: fixed;
-  }
-
-  @nest html.ie & {
-    z-index: -1;
-  }
-
-  &.animation {
-    animation-name: ripple;
-    animation-duration: 1s;
-    animation-fill-mode: both;
-  }
 }

package/src/styles/Libraries/Tippy.css

@@ -9,7 +9,7 @@
     background-color: rgb(var(--color-background));
     background-clip: padding-box;
     border: 1px solid rgb(0 8 16 / 0.05);
-    color: rgb(var(--color-current));
+    color: rgb(var(--color-default));
     box-shadow: 0 3px 14px -0.5px rgb(0 8 16 / 0.08);
     border-radius: var(--radius);
     left: 0.1875rem;

package/src/styles/Ui/+.css

@@ -1,7 +1,6 @@
 @import "Badge.css";
 @import "Btn.css";
 @import "Checkbox.css";
-@import "Dropdown.css";
 @import "Heading.css";
 @import "Icon.css";
 @import "Image.css";

package/src/styles/Ui/Badge.css

@@ -29,7 +29,7 @@
   line-height: var(--ui-badge-size);
   transition: var(--transition-opacity);
 
-  @nest .no-touch &:is([href]:hover, button:hover) {
+  @nest .no-touch &:is([href], button):is(:hover, :focus-visible) {
     opacity: var(--ui-badge-hover-opacity);
   }
 

package/src/styles/Ui/Btn.css

@@ -32,12 +32,13 @@
   height: var(--ui-btn-height);
   padding: var(--ui-btn-py) var(--ui-btn-px);
   border-radius: var(--ui-btn-radius);
-  transition: var(--transition-opacity), var(--transition-background);
+  transition: var(--transition-opacity), var(--transition-background), var(--transition-color);
   background-color: var(--ui-btn-bg);
   color: var(--ui-btn-color);
 
-  @nest .dark &.bg-default {
+  @nest .dark &.accent-dark {
     --ui-btn-color: rgb(var(--color-dark));
+    --color-accent: var(--color-light);
   }
 
   &:--theme-light {
@@ -59,7 +60,7 @@
     opacity: 0;
     transition: var(--transition-opacity);
 
-    @nest .no-touch :is(:hover, :focus)&, :is(:--state-active)& {
+    @nest .no-touch :is(:hover, :focus-visible)&, :is(:--state-active)& {
       opacity: var(--ui-btn-hover-opacity);
     }
   }
@@ -97,8 +98,16 @@
     }
   }
 
+  &:--type-text {
+    @nest :not(:hover, :focus-visible, :--state-active)& {
+      --ui-btn-color: currentColor;
+
+      background-color: transparent;
+    }
+  }
+
   &:--type-outline {
-    --ui-btn-color: currentColor;
+    --ui-btn-color: rgb(var(--color-current));
     --ui-btn-hover-opacity: 0.1;
 
     background-color: transparent;
@@ -130,6 +139,11 @@
     border-radius: 50%;
   }
 
+  &:--size-sm {
+    --ui-btn-height: 2.25rem;
+    --ui-btn-px: 1rem;
+  }
+
   &:--size-lg {
     --ui-btn-icon-size: 1.5rem;
     --ui-btn-height: 3rem;
@@ -138,7 +152,11 @@
 
   &:--state-loading {
     pointer-events: none;
-    color: var(--ui-btn-bg);
+    color: transparent;
+
+    & > * {
+      opacity: 0;
+    }
 
     &::before {
       z-index: 1;
@@ -155,7 +173,7 @@
       margin-top: -0.625rem;
       left: 50%;
       top: 50%;
-      opacity: 1;
+      opacity: 1 !important;
     }
   }
 

package/src/styles/Ui/Checkbox.css

@@ -12,9 +12,12 @@
   --ui-checkbox-radius: 0.375rem;
   --ui-checkbox-icon: var(--icon-check);
   --ui-checkbox-icon-size: 1.125rem;
+  --ui-checkbox-validity-size: 0.875rem;
+  --ui-checkbox-validity-offset: 0.375rem;
 
   transition: var(--transition-color);
   display: inline-flex;
+  flex-wrap: wrap;
   align-self: flex-start;
   position: relative;
   user-select: none;
@@ -22,6 +25,11 @@
   z-index: 1;
   color: var(--ui-checkbox-color);
 
+  &[disabled] {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
   @nest .text-light & {
     --ui-checkbox-border-color-raw: var(--color-light);
   }
@@ -39,6 +47,15 @@
     --ui-checkbox-color: rgb(var(--color-error));
   }
 
+  & em {
+    display: block;
+    width: 100%;
+    font-size: var(--ui-checkbox-validity-size);
+    color: rgb(var(--color-error));
+    font-style: normal;
+    margin-top: var(--ui-checkbox-validity-offset);
+  }
+
   & input {
     position: relative;
     display: inline-flex;
@@ -64,7 +81,6 @@
       content: "";
       background-color: currentColor;
       mask: var(--ui-checkbox-icon);
-      opacity: 0;
       transform: scale(0);
       will-change: transform;
       width: 1em;
@@ -80,7 +96,7 @@
       }
     }
 
-    &:focus, &:hover {
+    &:is(:hover, :focus-visible) {
       --ui-checkbox-bg-raw: var(--ui-checkbox-checked-bg-raw);
       --ui-checkbox-border-color-raw: var(--ui-checkbox-checked-bg-raw);
       --ui-checkbox-border-opacity: 0.75;
@@ -111,6 +127,15 @@
         transform: scale(1);
       }
     }
+
+    &[required] {
+      & + * {
+        &::after {
+          color: rgb(var(--color-error));
+          content: " *";
+        }
+      }
+    }
   }
 
   & a {
@@ -118,7 +143,7 @@
     transition: var(--transition-opacity);
     color: rgb(var(--color-accent));
 
-    @nest .no-touch &[href]:hover {
+    @nest .no-touch &[href]:is(:hover, :focus-visible) {
       opacity: 0.8;
     }
   }

package/src/styles/Ui/Heading.css

@@ -1,9 +1,10 @@
 .ui-heading {
   --ui-heading-size: 1.5rem;
+  --ui-heading-weight: var(--font-bold);
   --ui-heading-size-line: 0.5rem;
 
   display: block;
-  font-weight: var(--font-bold);
+  font-weight: var(--ui-heading-weight);
   font-size: var(--ui-heading-size);
   line-height: calc(var(--ui-heading-size) + var(--ui-heading-size-line));
 

package/src/styles/Ui/Icon.css

@@ -14,7 +14,7 @@
   & > * {
     transition: var(--transition-opacity);
 
-    @nest .no-touch :is([href]:hover, button:hover)& {
+    @nest .no-touch :is([href], button):is(:hover, :focus-visible)& {
       opacity: var(--ui-icon-hover-opacity);
     }
   }
@@ -27,7 +27,7 @@
   align-items: center;
   transition: var(--transition-opacity), var(--transition-color);
 
-  @nest .no-touch &:is([href]:hover, button:hover) {
+  @nest .no-touch &:is([href], button):is(:hover, :focus-visible) {
     opacity: var(--ui-icon-hover-opacity);
   }
 }

package/src/styles/Ui/Image.css

@@ -1,18 +1,12 @@
 .ui-image {
   position: relative;
+  display: block;
 
   &:not(.bg-transparent) {
     background-color: rgb(var(--color-background-100));
   }
 
-  &::before {
-    content: "";
-    display: block;
-  }
-
   & > * {
-    position: absolute;
-    inset: 0;
     width: 100%;
     height: 100%;
   }