@newlogic-digital/ui 3.1.0 → 3.3.0

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

@@ -24,7 +24,7 @@
     display: none !important;
   }
 
-  &:not(.is-fade):not(.is-grabbing) {
+  &:not(.is-fade, .is-grabbing) {
     scroll-behavior: smooth;
     scroll-snap-type: x mandatory;
   }
@@ -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/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;
@@ -80,7 +97,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 +128,15 @@
         transform: scale(1);
       }
     }
+
+    &[required] {
+      & + * {
+        &::after {
+          color: rgb(var(--color-error));
+          content: " *";
+        }
+      }
+    }
   }
 
   & a {
@@ -118,7 +144,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%;
   }

package/src/styles/Ui/Input.css

@@ -1,4 +1,4 @@
-.ui-input, .ui-select {
+:is(.ui-input, .ui-select) {
   --ui-input-height: 3rem;
   --ui-input-height-textarea: 8rem;
   --ui-input-py: 0.75rem;
@@ -50,16 +50,16 @@
     margin-top: calc(var(--ui-input-size) / 2 * -1);
     order: -1;
 
-    @nest [data-has~="icon-l"]& {
+    @nest :has(.icon-l)& {
       left: calc(var(--ui-input-px) + var(--ui-input-icon-size) + calc(var(--ui-input-px) / 1.75));
     }
 
-    @nest [data-has~="icon-r"]& {
+    @nest :has(.icon-r)& {
       right: calc(var(--ui-input-px) + var(--ui-input-icon-size) + calc(var(--ui-input-px) / 1.75));
     }
   }
 
-  & > :is(input, textarea, select, .input) {
+  & > :where(input, textarea, select, .input) {
     width: 100%;
     transition: var(--transition-border), var(--transition-shadow);
     box-shadow: none;
@@ -69,10 +69,15 @@
     height: var(--ui-input-height);
     font-weight: var(--ui-input-weight);
     border-radius: var(--ui-input-radius);
-    padding: calc(var(--ui-input-py) * 1.75) var(--ui-input-px) calc(var(--ui-input-py) * 0.5);
+    padding: var(--ui-input-py) var(--ui-input-px);
     color: inherit;
     border: 1px solid rgb(var(--ui-input-border-color) / var(--ui-input-border-opacity));
 
+    @nest :has(label)& {
+      padding-top: calc(var(--ui-input-py) * 1.75);
+      padding-bottom: calc(var(--ui-input-py) * 0.5);
+    }
+
     &[disabled] {
       cursor: default;
       background-color: rgb(var(--color-background-100));
@@ -123,20 +128,13 @@
       }
     }
 
-    @nest [data-has~="icon-l"]& {
+    @nest :has(.icon-l)& {
       padding-left: calc(var(--ui-input-px) + var(--ui-input-icon-size) + calc(var(--ui-input-px) / 1.75));
     }
 
-    @nest [data-has~="icon-r"]&, :--state-invalid& {
+    @nest :has(.icon-r)&, :--state-invalid& {
       padding-right: calc(var(--ui-input-px) + var(--ui-input-icon-size) + calc(var(--ui-input-px) / 1.75));
     }
-
-    @nest :not(:--state-placeholder)& {
-      &:is([placeholder], [data-placeholder]) {
-        padding-top: var(--ui-input-py);
-        padding-bottom: var(--ui-input-py);
-      }
-    }
   }
 
   & > input {
@@ -203,7 +201,7 @@
       }
 
       @nest :not(:--state-active)& {
-        &:not([placeholder]):not(:focus) {
+        &:not([placeholder], :focus) {
           font-size: 0;
         }
       }
@@ -221,7 +219,7 @@
     min-height: var(--ui-input-height-textarea);
   }
 
-  & > input, & > textarea {
+  & > :where(input, textarea) {
     background-clip: padding-box;
     cursor: text;
 
@@ -229,7 +227,7 @@
       box-shadow: none;
     }
 
-    @nest :is(:--state-active, :--state-placeholder)&, &:focus {
+    @nest &:focus, :--state-active&, :has([placeholder] ~ label)& {
       & ~ label {
         transform: translateY(calc(var(--ui-input-size) / 1.4 * -1)) scale(0.8);
       }
@@ -387,7 +385,7 @@
         text-overflow: ellipsis;
         overflow: hidden;
 
-        @media (--media-768) {
+        @media (--media-touch) {
           padding-top: 0.875rem;
           padding-bottom: 0.875rem;
         }
@@ -405,6 +403,55 @@
   }
 }
 
+:is(.ui-input, .ui-select, .ui-input-group) {
+  --ui-input-validity-size: 0.875rem;
+  --ui-input-validity-offset: 0.375rem;
+
+  & em {
+    display: block;
+    font-size: var(--ui-input-validity-size);
+    color: rgb(var(--color-error));
+    font-style: normal;
+    margin-top: var(--ui-input-validity-offset);
+  }
+}
+
+.ui-input-group {
+  display: flex;
+
+  & .ui-btn {
+    height: auto;
+
+    & + .ui-input {
+      z-index: 1;
+    }
+  }
+
+  & > * {
+    & + :is(.ui-input, .ui-select) {
+      margin-left: -1px;
+
+      & :is(input, select):not(:focus) {
+        border-left-color: transparent;
+      }
+    }
+
+    &:not(:first-child) {
+      &, & :is(input, select) {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+
+    &:not(:last-child) {
+      &, & :is(input, select) {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+  }
+}
+
 .pcr-app {
   border-radius: var(--radius);
   overflow: hidden;

package/src/styles/Ui/Label.css

@@ -4,8 +4,8 @@
   --ui-label-spacing: 0.05rem;
 
   display: block;
-  font-size: var(--ui-title-size);
-  line-height: calc(var(--ui-title-size) + var(--ui-title-size-line));
+  font-size: var(--ui-label-size);
+  line-height: calc(var(--ui-label-size-line) + var(--ui-label-size-line));
   font-weight: var(--font-medium);
 
   & ~ :is([class^="ui-"]:not(&), [class^="c-"]) {

package/src/styles/Ui/Link.css

@@ -1,7 +1,8 @@
 .ui-link {
   --ui-link-size: 0.875rem;
-  --ui-link-weight: var(--font-medium);
+  --ui-link-weight: var(--font-normal);
   --ui-link-hover-opacity: 0.8;
+  --ui-link-hover-color: rgb(var(--color-accent));
   --ui-link-underline-opacity: 0.5;
 
   display: inline-flex;
@@ -9,15 +10,21 @@
   cursor: pointer;
   font-size: var(--ui-link-size);
   font-weight: var(--ui-link-weight);
-  transition: var(--transition-opacity);
+  transition: var(--transition-opacity), var(--transition-color);
   position: relative;
   white-space: nowrap;
+  line-height: 1.5;
 
-  @nest .no-touch &:hover {
+  &:--size-sm {
+    --ui-link-size: 0.75rem;
+  }
+
+  @nest &:focus-visible, .no-touch &:is([href], button):hover {
     opacity: var(--ui-link-hover-opacity);
+    color: var(--ui-link-hover-color);
   }
 
-  &::after {
+  &[data-type~="underline"]::after {
     content: "";
     border-bottom: 1px solid currentColor;
     opacity: 0;
@@ -26,7 +33,7 @@
     transition: var(--transition-opacity), var(--transition-transform);
     transform: translateY(-0.25rem);
 
-    @nest .no-touch :not([href^="tel:"], [href^="mailto:"]):hover& {
+    @nest .no-touch :not([href^="tel:"], [href^="mailto:"]):is(:hover, :focus-visible)& {
       transform: none;
       opacity: var(--ui-link-underline-opacity);
     }

package/src/styles/Ui/Notice.css

@@ -40,7 +40,7 @@
     transition: var(--transition-opacity);
     color: currentColor !important;
 
-    @nest .no-touch &[href]:hover {
+    @nest .no-touch &[href]:is(:hover, :focus-visible) {
       opacity: 0.8;
     }
   }

package/src/styles/Ui/Select.css

@@ -1,7 +1,4 @@
 .ui-select {
-  cursor: pointer;
-  user-select: none;
-
   &:--state-active {
     & label {
       transform: translateY(calc(var(--ui-input-size) / 1.4 * -1)) scale(0.8);
@@ -35,9 +32,10 @@
     position: relative;
     z-index: 1;
     text-overflow: ellipsis;
-    cursor: pointer;
     -webkit-appearance: none;
     -moz-appearance: none;
+    cursor: pointer;
+    user-select: none;
 
     @nest [tabindex]& {
       pointer-events: none;
@@ -131,7 +129,7 @@
       font-size: var(--ui-input-size);
       border-radius: var(--radius);
 
-      @nest .no-touch &:is(:hover, :focus) {
+      @nest .no-touch &:is(:hover, :focus-visible) {
         background-color: rgb(var(--color-accent) / 0.1);
       }
     }

package/src/styles/Ui/Text.css

@@ -1,11 +1,20 @@
 .ui-text {
-  --ui-text-size: 0.9375rem;
+  --ui-text-size: 0.875rem;
+  --ui-text-size-line: 0.75rem;
   --ui-text-weight: var(--font-normal);
   --ui-text-weight-bold: var(--font-semibold);
 
   font-weight: var(--ui-text-weight);
   font-size: var(--ui-text-size);
-  line-height: calc(var(--ui-text-size) + 0.75rem);
+  line-height: calc(var(--ui-text-size) + var(--ui-text-size-line));
+
+  &:--size-base {
+    --ui-text-size: 1rem;
+  }
+
+  &:--size-lg {
+    --ui-text-size: 1.125rem;
+  }
 
   & a {
     text-decoration: underline;
@@ -14,7 +23,7 @@
     &:not([class*="text-"]) {
       color: rgb(var(--color-accent));
 
-      @nest .no-touch &[href]:hover {
+      @nest .no-touch &[href]:is(:hover, :focus-visible) {
         opacity: 0.8;
       }
     }
@@ -65,7 +74,7 @@
 
   & p {
     line-height: inherit;
-    margin: 0;
+    margin: 0 0 0.25rem;
 
     &:empty {
       line-height: 1rem;

package/src/styles/Ui/Title.css

@@ -1,12 +1,13 @@
 .ui-title {
   --ui-title-size: 0.875rem;
-  --ui-title-size-line: 0.5rem;
+  --ui-title-size-line: 0.25rem;
   --ui-title-spacing: 0.05rem;
+  --ui-title-weight: var(--font-semibold);
 
   display: block;
   font-size: var(--ui-title-size);
   line-height: calc(var(--ui-title-size) + var(--ui-title-size-line));
-  font-weight: var(--font-semibold);
+  font-weight: var(--ui-title-weight);
 
   &[class*="uppercase"] {
     letter-spacing: var(--ui-title-spacing);

package/src/styles/Utils/+.css

@@ -0,0 +1,9 @@
+@import "default.css";
+@import "icons.css";
+@import "keyframes.css";
+@import "normalize.css";
+@import "print.css";
+@import "tailwind/+.css";
+@import "theme/+.css";
+@import "vars.css";
+@import "vendor.css";

package/src/styles/Utils/default.css

@@ -114,13 +114,6 @@ a {
   border-color: rgb(var(--color-current) / var(--tw-text-opacity, 1));
 }
 
-[class*="aspect-"] {
-  &::before {
-    content: "";
-    display: block;
-  }
-}
-
 [hidden] {
   display: none;
 }

package/src/styles/Utils/keyframes.css

@@ -48,7 +48,7 @@
     transform: translateY(2rem);
   }
 
-  to {
+  100% {
     opacity: 1;
     transform: translateY(0);
   }
@@ -60,7 +60,7 @@
     transform: translateY(-2rem);
   }
 
-  to {
+  100% {
     opacity: 1;
     transform: translateY(0);
   }
@@ -96,7 +96,7 @@
     transform: translateY(0);
   }
 
-  to {
+  100% {
     opacity: 0;
     transform: translateY(-2rem);
   }
@@ -108,7 +108,7 @@
     transform: translateY(0);
   }
 
-  to {
+  100% {
     opacity: 0;
     transform: translateY(2rem);
   }

package/src/styles/Utils/tailwind/+.css

@@ -0,0 +1,2 @@
+@import "base.css";
+@import "gutters.css";

package/src/styles/Utils/tailwind/base.css

@@ -12,4 +12,29 @@
     animation-duration: 0.5s;
     animation-fill-mode: both;
   }
+
+  .slider {
+    margin-left: calc(var(--container-padding-calc) * -1);
+    margin-right: calc(var(--container-padding-calc) * -1);
+    padding-left: var(--container-padding-calc);
+    scroll-padding-left: var(--container-padding-calc);
+    scroll-padding-right: var(--container-padding-calc);
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+    user-select: none;
+    scrollbar-width: none !important;
+    -ms-overflow-style: none;
+    display: flex;
+
+    & > * {
+      flex: 0 0 auto;
+      scroll-snap-align: start;
+
+      &:last-child {
+        box-sizing: content-box;
+        border-right: var(--container-padding-calc) solid transparent;
+      }
+    }
+  }
 }