twntyx-css 1.0.1 → 1.0.3

package/styles/button.css

@@ -107,7 +107,7 @@
       }
     }
     &.button-primary {
-     &,
+      &,
       &:hover,
       &:active {
         @apply bg-none text-shadow-none bg-core-ui-100 dark:bg-core-ui-800 text-text-secondary/75 border-line-default;
@@ -150,9 +150,7 @@
 
   /* VARIANTS */
   &.button-primary {
-    @apply
-    surface-interactive-brand
-    ;
+    @apply surface-interactive-brand;
 
     &.is-active {
       @apply text-text-default bg-background-brand-active;
@@ -160,7 +158,7 @@
   }
 
   /* Text feedback */
-  &[data-feedback]:not([data-feedback=""]):not([data-feedback-icon]) {
+  &[data-feedback]:not([data-feedback='']):not([data-feedback-icon]) {
     @apply overflow-hidden;
 
     &::before {
@@ -174,7 +172,7 @@
   }
 
   /* Icon feedback */
-  &[data-feedback][data-feedback-icon]:not([data-feedback=""]) {
+  &[data-feedback][data-feedback-icon]:not([data-feedback='']) {
     @apply relative;
 
     &::before {
@@ -191,11 +189,12 @@
     }
 
     > * {
-      animation: button-feedback-icon-label 4s cubic-bezier(1, 0, 0, 0.9) forwards;
+      animation: button-feedback-icon-label 4s cubic-bezier(1, 0, 0, 0.9)
+        forwards;
     }
 
     /* Success variant */
-    &[data-feedback-icon="success"] {
+    &[data-feedback-icon='success'] {
       &::after {
         @apply mask-check;
       }
@@ -209,7 +208,7 @@
     }
 
     /* Error variant */
-    &[data-feedback-icon="error"] {
+    &[data-feedback-icon='error'] {
       &::after {
         @apply mask-close;
       }
@@ -223,7 +222,7 @@
     }
 
     /* Attention variant */
-    &[data-feedback-icon="attention"] {
+    &[data-feedback-icon='attention'] {
       &::after {
         @apply mask-exclamation;
       }
@@ -238,7 +237,7 @@
   }
 
   /* Hide feedback when empty */
-  &[data-feedback=""] {
+  &[data-feedback=''] {
     &::before,
     &::after {
       @apply hidden;
@@ -246,7 +245,7 @@
   }
 
   /* Icon-only feedback */
-  &[data-feedback="."] {
+  &[data-feedback='.'] {
     &::before {
       @apply hidden;
     }
@@ -335,25 +334,39 @@
 /* Close */
 .button.button-close,
 .button-close {
-   --close-size: 2.75rem;
-  @apply size-(--close-size) min-w-(--close-size) min-h-(--close-size) p-0 text-transparent! rounded-full transition-transform duration-300 hover:rotate-90 ease-out-quint;
+  --close-size: 2.75rem;
+  @apply size-(--close-size) min-w-(--close-size) min-h-(--close-size) p-0 text-transparent! rounded-full;
 
   > span {
     @apply opacity-0 pointer-events-none;
   }
 
   &::before {
-    @apply size-[calc(var(--close-size)-4px)];
+    @apply content-['']
+    block
+    size-[calc(var(--close-size)-20%)]
+    absolute
+    rotate-0
+    mask-close
+    transition-transform
+    duration-300
+    ease-out-quint;
   }
-  
+
+  &:hover {
+    &::before {
+      @apply rotate-90;
+    }
+  }
+
   &.button-xs {
-    --close-size:1.25rem;
+    --close-size: 1.25rem;
   }
   &.button-sm {
-    --close-size:1.75rem;
+    --close-size: 1.75rem;
   }
   &.button-lg {
-    --close-size:3.5rem;
+    --close-size: 3.5rem;
   }
 
   &.button-primary {
@@ -380,15 +393,6 @@
     }
   }
 
-  &::before {
-    @apply content-['']
-    absolute
-    /* block
-    inset-0 */
-    transform-gpu
-    mask-close;
-  }
-
   &:not([disabled]),
   &:not(.is-disabled) {
     &:hover,
@@ -400,8 +404,7 @@
   }
 }
 
-
-  /* SIZES */
+/* SIZES */
 .button-xs {
   @apply text-xs
   min-w-5
@@ -465,21 +468,27 @@
   }
 }
 
-
 /* Button input */
 .button {
-  &:is(input[type="checkbox"]),
-  &:is(input[type="radio"]) {
+  &:is(input[type='checkbox']),
+  &:is(input[type='radio']) {
     @apply appearance-none;
+
     &::after {
       @apply content-[attr(aria-label)];
     }
 
+    &:checked {
+      @apply z-10;
+    }
+
     &.button-primary {
       &:checked {
         @apply bg-background-inverted border-background-inverted bg-none text-shadow-none shadow-none!;
-        
-        *, &::before, &::after {
+
+        *,
+        &::before,
+        &::after {
           @apply drop-shadow-none!;
         }
         &::after {
@@ -492,7 +501,9 @@
       &:checked {
         @apply surface-brand;
 
-        *, &::before, &::after {
+        *,
+        &::before,
+        &::after {
           @apply drop-shadow-none!;
         }
       }
@@ -501,11 +512,11 @@
 }
 
 .join > .button.button-plain,
-.button.button-plain:is(input[type="checkbox"]),
-.button.button-plain:is(input[type="radio"]) {
+.button.button-plain:is(input[type='checkbox']),
+.button.button-plain:is(input[type='radio']) {
   @apply no-underline include-border-secondary text-text-default;
   &:checked {
-     @apply bg-background-inverted border-background-inverted bg-none text-shadow-none;
+    @apply bg-background-inverted border-background-inverted bg-none text-shadow-none;
     &::after {
       @apply text-text-inverted;
     }

package/styles/card.css

@@ -3,14 +3,14 @@
 /*----------------------------*/
 
 @utility card {
-  &:not([class*="rounded"]) {
+  &:not([class*='rounded']) {
     @apply rounded-3xl;
   }
 
   @apply border bg-background-surface border-line-default;
 
-   :where(figure:first-child) {
-    @apply overflow-hidden rounded-ss-[inherit] rounded-se-[inherit];
+  > figure:first-child {
+    @apply overflow-clip rounded-ss-[inherit] rounded-se-[inherit];
   }
 }
 

package/styles/chat.css

@@ -33,6 +33,8 @@
   gap-6
   p-4
   w-full;
+
+  
 }
 
 /* Message groups */
@@ -415,9 +417,14 @@
 /* AI Chat variant */
 @utility chat-secondary {
 
+  &:has(.chat-footer-full) {
+    @apply bg-background-surface-sunken;
+  }
+
   .chat-feed {
     @apply
     bg-background-surface-sunken;
+
   }
   .chat-group {
     @apply
@@ -482,6 +489,145 @@
   }
 }
 
+/* Media attachments inside bubbles */
+@utility chat-media-grid {
+  @apply
+  grid
+  grid-cols-2
+  gap-2
+  mt-2;
+}
+
+@utility chat-media-item {
+  @apply
+  overflow-hidden
+  rounded-xl
+  border
+  border-line-default
+  bg-background-surface-sunken;
+
+  img {
+    @apply
+    block
+    w-full
+    h-24
+    md:h-28
+    object-cover;
+  }
+}
+
+/* Loading -> message loop simulation */
+@utility chat-loop-simulation {
+  @apply overflow-x-hidden;
+}
+
+@utility chat-loop-stack {
+  @apply
+  relative
+  mt-6;
+
+  min-height: 9.25rem;
+
+  > .chat-group {
+    @apply
+    absolute
+    inset-0
+    mt-0;
+  }
+
+  .chat-loop-loading {
+    animation: chat-loop-loading 4.8s ease-in-out infinite;
+  }
+
+  .chat-loop-message {
+    animation: chat-loop-message 4.8s ease-in-out infinite;
+  }
+}
+
+@utility chat-loop-stack-lg {
+  min-height: 10.75rem;
+}
+
+/* Extended chat footer demo */
+@utility chat-footer-full {
+
+  @apply flex flex-col gap-2 w-full rounded-2xl! surface mb-4;
+
+  .chat-input-full {
+    @apply
+    flex-wrap
+    items-end;
+
+    .chat-add-menu-trigger,
+    .chat-add-menu-button {
+      @apply shrink-0;
+    }
+
+    .chat-footer-actions {
+      @apply
+      order-3
+      flex
+      gap-2
+      flex-1
+      items-center
+      justify-end
+      sm:order-none
+      sm:flex-none
+      sm:ml-auto;
+    }
+
+    .chat-model-select {
+      @apply
+      w-36
+      sm:w-44;
+    }
+
+
+    .chat-dictate {
+      @apply
+      relative;
+
+      &.is-listening::after {
+        content: "";
+        @apply
+        absolute
+        -top-1
+        -right-1
+        size-2
+        rounded-full
+        bg-background-error
+        border
+        border-background-surface;
+        animation: chat-dictate-pulse 1.4s ease-in-out infinite;
+      }
+    }
+
+    .chat-send-button {
+      @apply
+      shrink-0;
+    }
+  }
+
+  .chat-add-menu {
+    @apply min-w-56;
+
+    .menu {
+      @apply gap-0;
+    }
+
+    .menu > li > button {
+      @apply justify-start;
+    }
+  }
+
+  .chat-dictate-hint {
+    @apply
+    mt-2
+    text-xs
+    text-text-secondary;
+  }
+}
+
 /* Loading animation */
 @keyframes loading-gradient {
   0% {
@@ -504,3 +650,64 @@
     transform: scale(1);
   }
 }
+
+@keyframes chat-loop-loading {
+  0%,
+  48% {
+    opacity: 1;
+    transform: translateY(0);
+    visibility: visible;
+  }
+  52%,
+  100% {
+    opacity: 0;
+    transform: translateY(-0.35rem);
+    visibility: hidden;
+  }
+}
+
+@keyframes chat-loop-message {
+  0%,
+  48% {
+    opacity: 0;
+    transform: translateY(0.35rem);
+    visibility: hidden;
+  }
+  52%,
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+    visibility: visible;
+  }
+}
+
+@keyframes chat-dictate-pulse {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.35;
+    transform: scale(1.35);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chat-loop-stack .chat-loop-loading,
+  .chat-loop-stack .chat-loop-message,
+  .chat-footer-full .chat-input-full .chat-dictate.is-listening::after {
+    animation: none;
+  }
+
+  .chat-loop-stack .chat-loop-loading {
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  .chat-loop-stack .chat-loop-message {
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+  }
+}