@awes-io/ui 2.142.3 → 2.144.0

package/assets/css/components/_index.css

@@ -24,6 +24,7 @@
 @import './action-card.css';
 @import './action-card-body.css';
 @import './card.css';
+@import './content-placeholder.css';
 
 @import './chip.css';
 @import './chip-select';
@@ -39,7 +40,6 @@
 @import './dropdown.css';
 @import './dropdown-button.css';
 @import './flow.css';
-@import './filter-date-range.css';
 @import './list.css';
 
 @import './form.css';
@@ -47,6 +47,9 @@
 @import './text-field.css';
 @import './date.css';
 @import './filter-month.css';
+@import './filter-select.css';
+@import './filter-date-range.css';
+@import './filter-chosen.css';
 @import './headline.css';
 @import './image-upload.css';
 @import './info.css';
@@ -70,6 +73,7 @@
 @import './user-menu.css';
 @import './nav.css';
 @import './page.css';
+@import './page-aside.css';
 @import './page-modal.css';
 @import './page-menu-buttons.css';
 @import './page-header.css';
@@ -88,6 +92,8 @@
 
 @import './tel.css';
 
+@import './number.css';
+
 @import './notification.css';
 
 @import './tags.css';

package/assets/css/components/action-card.css

@@ -22,6 +22,7 @@
         margin-top: 0;
         margin-bottom: 0;
         margin-inline-end: auto;
+        min-width: 0;
     }
 
     &__title {

package/assets/css/components/action-icon.css

@@ -7,7 +7,7 @@
     flex-shrink: 0;
 
     width: var(--size);
-    height: var(--size);
+    aspect-ratio: 1 / 1;
     padding: min(0.25rem, calc(var(--size) / 8));
     border-radius: var(--radius);
 
@@ -16,7 +16,7 @@
 
     img {
         width: var(--size);
-        height: var(--size);
+        aspect-ratio: 1 / 1;
         border-radius: var(--radius);
         object-fit: cover;
     }

package/assets/css/components/alert.css

@@ -1,11 +1,14 @@
 .aw-alert {
+    display: flex;
+    justify-content: space-between;
+
     padding: 0.875rem 1.375rem;
     border-radius: 0.625rem;
-    border: 0.125rem dashed var(--aw-alert-color);
+    background: var(--aw-alert-color);
 
     &__icon {
         margin-right: 0.625rem;
-        color: var(--aw-alert-color);
+        color: var(--aw-alert-on-color);
     }
 
     .aw-description {
@@ -30,16 +33,15 @@
         display: flex;
 
         align-items: center;
-        margin-left: 1.75rem;
-        margin-top: 0.5rem;
+        margin-top: 0.25rem;
 
         font-size: 0.875rem;
         line-height: 1.125rem;
         font-weight: 700;
 
         :where(:is(a, button):not(.aw-button)) {
-            --btn-color: var(--aw-alert-color);
-            color: var(--aw-alert-color);
+            --btn-color: var(--aw-alert-on-color) !important;
+            color: var(--aw-alert-on-color) !important;
         }
 
         :where(:is(a, button):not(.aw-button)) {
@@ -55,26 +57,30 @@
         }
     }
 
-    &--title-start {
-        .aw-alert__title {
-            align-items: start;
+    &__close {
+         justify-content: flex-end;
+         margin-left: 1rem;
+         font-size: 0.875rem;
+         line-height: 1.125rem;
+         font-weight: 700;
+         color: var(--aw-alert-on-color);
+
+        :where(:is(a, button):not(.aw-button)) {
+            text-decoration: underline;
         }
-    }
 
-    &--color-default {
-        border: 0.125rem dashed var(--c-mono-800);
+        a,
+        button {
+            font-size: 0.875rem;
+            line-height: 1.125rem;
+            font-weight: 700;
+            white-space: nowrap;
+        }
     }
-}
 
-@screen lg {
-    .aw-alert {
-        display: flex;
-        justify-content: space-between;
-
-        &__buttons {
-            justify-content: flex-end;
-            margin-left: 1rem;
-            margin-top: 0;
+    &--title-start {
+        .aw-alert__title {
+            align-items: start;
         }
     }
 }

package/assets/css/components/animation.css

@@ -9,7 +9,7 @@
 
 @keyframes aw-rotate {
     to {
-        transform: rotate(1turn)
+        transform: rotate(1turn);
     }
 }
 
@@ -25,35 +25,55 @@
 }
 
 @keyframes aw-shake {
- 0%,
- 100% {
-  transform:translateX(0)
- }
- 10% {
-  transform:translateX(-9px)
- }
- 20% {
-  transform:translateX(8px)
- }
- 30% {
-  transform:translateX(-7px)
- }
- 40% {
-  transform:translateX(6px)
- }
- 50% {
-  transform:translateX(-5px)
- }
- 60% {
-  transform:translateX(4px)
- }
- 70% {
-  transform:translateX(-3px)
- }
- 80% {
-  transform:translateX(2px)
- }
- 90% {
-  transform:translateX(-1px)
- }
+    0%,
+    100% {
+        transform: translateX(0);
+    }
+    10% {
+        transform: translateX(-9px);
+    }
+    20% {
+        transform: translateX(8px);
+    }
+    30% {
+        transform: translateX(-7px);
+    }
+    40% {
+        transform: translateX(6px);
+    }
+    50% {
+        transform: translateX(-5px);
+    }
+    60% {
+        transform: translateX(4px);
+    }
+    70% {
+        transform: translateX(-3px);
+    }
+    80% {
+        transform: translateX(2px);
+    }
+    90% {
+        transform: translateX(-1px);
+    }
+}
+
+@keyframes aw-appear {
+    to {
+        opacity: 1;
+    }
 }
+
+@keyframes aw-placeholder {
+    0% {
+        transform: translateX(-100%);
+        opacity: 0;
+    }
+    50% {
+        opacity: 1;
+    }
+    100% {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+}

package/assets/css/components/badge.css

@@ -14,6 +14,7 @@
         display: inline-flex;
         align-items: center;
         justify-content: center;
+        gap: 0.25rem;
 
         min-height: 1.5rem;
         min-width: 1.5rem;

package/assets/css/components/banner-text.css

@@ -3,15 +3,16 @@
 
     display: grid;
     grid-gap: theme('spacing.1', 0.25rem) theme('spacing.4', 1rem);
-    grid-template-areas: 'icon title'
-                         'icon description';
+    grid-template-areas:
+        'icon title'
+        'icon description';
     grid-template-columns: var(--banner-text-icon-size) auto;
 
     &__icon {
         grid-area: icon;
 
         display: flex;
-        align-items:center;
+        align-items: center;
         justify-content: center;
 
         width: var(--banner-text-icon-size);
@@ -25,16 +26,26 @@
         &--rounded {
             border-radius: 50%;
         }
+
+        &--square {
+            border-radius: 0.625rem;
+        }
     }
 
     &__title {
         grid-area: title;
         margin: 0;
+
+        &.aw-sub-headline {
+            display: flex;
+            gap: 0.25rem;
+        }
     }
 
     &__title-arrow {
         font-size: 0.875em;
-        margin-left: -0.25em;
+        margin-top: 0.25rem;
+        /* margin-left: -0.25em; */
     }
 
     &__description {

package/assets/css/components/card.css

@@ -30,7 +30,6 @@
 
     &__header-badge {
         flex-shrink: 0;
-        margin-left: auto;
         align-self: flex-start;
     }
 }

package/assets/css/components/content-placeholder.css

@@ -0,0 +1,104 @@
+.aw-content-placeholder {
+    --ph-gap-x: 1rem;
+    --ph-gap-y: 1rem;
+    --ph-border-radius: 0.5rem;
+
+    opacity: 0;
+    animation: aw-appear 200ms ease-in-out 100ms forwards;
+
+    display: grid;
+    grid-template-columns: repeat(var(--ph-columns), 1fr);
+    gap: var(--ph-gap-y) var(--ph-gap-x);
+
+    span {
+        display: block;
+        border-radius: var(--ph-border-radius);
+        width: var(--ph-width);
+        height: var(--ph-height);
+        aspect-ratio: var(--ph-aspect-ratio);
+
+        position: relative;
+        overflow: hidden;
+        background-color: rgba(var(--c-mono-800-rgb), 0.6);
+
+        &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            max-width: 1000px;
+            height: 100%;
+            background: linear-gradient(
+                to right,
+                transparent 0%,
+                rgba(var(--c-mono-800-rgb), 0.75) 15%,
+                transparent 30%
+            );
+
+            animation-duration: 1.5s;
+            animation-fill-mode: forwards;
+            animation-iteration-count: infinite;
+            animation-name: aw-placeholder;
+            animation-timing-function: linear;
+        }
+    }
+
+    &--text,
+    &--island {
+        --ph-gap-y: 0.625rem;
+        --ph-height: 1rem;
+    }
+
+    &--text > span {
+        width: 90%;
+
+        &:nth-child(n + 2) {
+            width: 100%;
+        }
+
+        &:nth-child(2n + 3) {
+            width: 95%;
+        }
+    }
+
+    &--form {
+        --ph-border-radius: 0.625rem;
+        --ph-gap-y: 1.5rem;
+        --ph-height: 3.5rem;
+    }
+
+    &--button {
+        display: flex;
+        align-items: center;
+
+        --ph-height: 2.5rem;
+
+        @screen lg {
+            --ph-height: 3.5rem;
+        }
+
+        & > span {
+            width: 8rem;
+        }
+    }
+
+    &--image {
+        --ph-width: minmax(1rem, 100%);
+        --ph-aspect-ratio: 16 / 9;
+    }
+
+    &--avatar {
+        --ph-width: 40px;
+        --ph-aspect-ratio: 1;
+        --ph-border-radius: 50%;
+    }
+}
+
+/* [data-dark='true'] .aw-content-placeholder span {
+    background-color: rgba(255, 255, 255, 0.08);
+}
+
+[data-dark='false'] .aw-content-placeholder span {
+    background-color: rgba(0, 0, 0, 0.04);
+} */

package/assets/css/components/dropdown.css

@@ -55,21 +55,27 @@
         margin: 0;
         padding: 0.75rem 1.5rem;
         border-radius: 0.625rem 0.625rem 0 0;
-
-        & + .aw-dropdown__content--mobile {
-            border-top-left-radius: 0;
-            border-top-right-radius: 0;
-            border-top: 1px solid var(--c-mono-900);
-        }
     }
 
     &__description {
+        background-color: var(--c-surface);
+        color: var(--c-mono-400);
+
         text-align: center;
         font-size: theme('fontSize.sm', 0.875rem);
-        margin: theme('spacing.1', 0.5rem) auto 0;
+
+        margin: 0;
+        padding: 0.75rem theme('spacing.4', 1rem);
+        border-radius: 10px 10px 0 0;
         position: relative;
     }
 
+    &__title + &__description {
+        border-radius: 0;
+        margin-top: -0.5rem;
+        padding-block: 0;
+    }
+
     &__content {
         max-height: 100%;
 
@@ -95,6 +101,13 @@
         } */
     }
 
+    &__title + &__content--mobile,
+    &__description + &__content--mobile {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+        border-top: 1px solid var(--c-mono-900);
+    }
+
     &__close {
         width: 100%;
         margin-top: 1rem;

package/assets/css/components/empty-container.css

@@ -2,7 +2,75 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    justify-content: center;
     gap: 1.5rem;
+    opacity: 0;
 
-    padding: 1.5rem 0;
+    &--padding {
+        @screen md {
+            padding: 1.25rem;
+        }
+
+        @acreen lg {
+            padding: 1.875rem;
+        }
+    }
+
+    &__icon {
+        width: 60px;
+        height: 60px;
+
+        @screen lg {
+            width: 80px;
+            height: 80px;
+        }
+    }
+
+    &__description {
+        max-width: 50rem;
+        width: 100%;
+    }
+
+    & > * {
+        opacity: 0;
+        transform: translateY(1.5rem);
+
+        &:nth-child(1) {
+            transition-delay: 140ms;
+        }
+
+        &:nth-child(2) {
+            transition-delay: 270ms;
+        }
+
+        &:nth-child(3) {
+            transition-delay: 340ms;
+        }
+
+        &:nth-child(4) {
+            transition-delay: 410ms;
+        }
+
+        &:nth-child(n + 5) {
+            transition-delay: 480ms;
+        }
+    }
+
+    img {
+        transform: scale(0.5);
+        transition-delay: 140ms;
+    }
+
+    &--visible {
+        opacity: 1;
+        transition: 200ms opacity cubic-bezier(0.33, 1, 0.68, 1);
+
+        & > *,
+        & > img {
+            opacity: 1;
+            transform: none;
+            transition: 300ms cubic-bezier(0.33, 1, 0.68, 1);
+            transition-property: transform, opacity;
+        }
+    }
 }

package/assets/css/components/filter-chosen.css

@@ -0,0 +1,6 @@
+.aw-filter-chosen {
+    .aw-chip__text {
+        display: flex;
+        align-items: center;
+    }
+}

package/assets/css/components/filter-date-range.css

@@ -6,12 +6,18 @@
             width: 100%;
         }
     }
+
+    .aw-filter-date-range {
+        .aw-dropdown__content--mobile {
+            max-height: 100%;
+        }
+    }
 }
 
 @screen sm {
     .aw-filter-date-range {
         &.aw-filter-date-range--width-full {
-             width: auto;
+            width: auto;
 
             .aw-button {
                 width: auto;
@@ -19,3 +25,13 @@
         }
     }
 }
+
+@screen md {
+    .aw-filter-date-range {
+        &__dropdown {
+            width: 320px;
+            max-width: 100%;
+            min-height: 446px;
+        }
+    }
+}

package/assets/css/components/filter-month.css

@@ -1,32 +1,30 @@
 .aw-filter-month {
-    @apply inline-flex;
+    display: inline-flex;
 
-    & > &__prev {
-        @apply rounded-r-none;
-    }
+    &__date {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
 
-    & > &__next {
-        @apply rounded-l-none;
-    }
+        padding-inline: 1rem;
 
-    & &__date {
-        @apply px-4 self-stretch leading-none flex flex-col justify-center border-t border-b;
-        border-color: theme('borderColor.default');
+        border: 2px solid var(--c-mono-800);
+        border-left-width: 0;
+        border-right-width: 0;
     }
 
     &.default &__date {
         min-width: 114px;
     }
 
-    & &__label {
-        @apply text-xs text-mono-400;
-    }
+    /* &__label {
+        font-size: 0.75rem;
+        color: var(--c-mono-400);
+    } */
 
     &__btn {
-        border-width: 1px;
-        border-style: solid;
-        border-color: theme('borderColor.default');
-        padding: 0.5rem 0.75rem;
+        border: 2px solid var(--c-mono-800);
+        padding: 0.375rem 0.625rem;
 
         svg {
             opacity: 0.4;
@@ -37,5 +35,13 @@
                 opacity: 0.9;
             }
         }
+
+        &--prev {
+            border-radius: 0.625rem 0 0 0.625rem;
+        }
+
+        &--next {
+            border-radius: 0 0.625rem 0.625rem 0;
+        }
     }
 }

package/assets/css/components/filter-select.css

@@ -0,0 +1,11 @@
+.aw-filter-select {
+    &__buttons {
+        @apply overflow-auto;
+        max-height: 225px;
+        overscroll-behavior: contain;
+    }
+
+    .aw-dropdown {
+        min-width: 200px;
+    }
+}