@mcp-b/react-components 0.17.0 → 0.19.0

package/dist/styles/prompt-input.css

@@ -1,5 +1,3 @@
-@import "./approval.css";
-
 .prompt-input {
   --prompt-input-secondary-text: var(--sigvelo-color-text-muted);
 
@@ -7,20 +5,20 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  gap: var(--sigvelo-spacing-3);
-  padding-block: var(--sigvelo-spacing-3) var(--sigvelo-spacing-2);
-  padding-inline: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-density-compact-control-gap);
+  padding-block: var(--sigvelo-spacing-2);
+  padding-inline: var(--sigvelo-density-compact-control-padding-inline);
   background-color: var(--sigvelo-color-surface);
   /* Fields keep their border; hairline + soft shadow for the floating-composer look */
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
-  border-radius: calc(var(--sigvelo-radius-xl) + var(--sigvelo-spacing-1));
+  border-radius: calc(var(--sigvelo-radius-xl) + var(--sigvelo-spacing-2));
   box-shadow: var(--sigvelo-shadow-sm);
   font-family: inherit;
   color: var(--sigvelo-color-text);
   transition:
-    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    box-shadow var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+    border-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    box-shadow var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .prompt-input__recording {
@@ -28,7 +26,7 @@
   align-items: center;
   gap: var(--sigvelo-spacing-2);
   flex: 1;
-  min-width: 0;
+  min-inline-size: 0;
 }
 
 .prompt-input__recording-add {
@@ -49,10 +47,10 @@
 }
 
 .prompt-input__recording-time {
-  min-inline-size: 2.5rem;
+  min-inline-size: var(--sigvelo-control-height-lg);
   color: var(--sigvelo-color-text-muted);
   font-variant-numeric: tabular-nums;
-  font-size: var(--sigvelo-text-sm);
+  font-size: var(--sigvelo-density-compact-control-font-size);
   text-align: end;
 }
 
@@ -64,7 +62,7 @@
 .prompt-input__footer-end:has(.prompt-input__recording) {
   flex: 1;
   flex-wrap: nowrap;
-  width: 100%;
+  inline-size: 100%;
 }
 
 .prompt-input__footer-end:has(.prompt-input__recording) > :not(.prompt-input__recording),
@@ -93,7 +91,7 @@
   flex-wrap: wrap;
   align-items: center;
   gap: var(--sigvelo-spacing-1-5);
-  min-height: 1.5rem;
+  min-block-size: var(--sigvelo-spacing-6);
 }
 
 .prompt-input__attachments {
@@ -109,12 +107,12 @@
   display: inline-flex;
   align-items: center;
   gap: var(--sigvelo-spacing-1-5);
-  max-width: 14rem;
-  padding: 0.25rem 0.5rem;
+  max-inline-size: 14rem;
+  padding: var(--sigvelo-spacing-1) var(--sigvelo-spacing-2);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
   border-radius: var(--sigvelo-radius-md);
-  font-size: var(--sigvelo-text-xs);
+  font-size: var(--sigvelo-density-compact-control-font-size);
   color: var(--sigvelo-color-text);
 }
 
@@ -133,8 +131,8 @@
 
 .prompt-input__attachment-thumb {
   display: block;
-  width: 3rem;
-  height: 3rem;
+  inline-size: var(--sigvelo-spacing-12);
+  block-size: var(--sigvelo-spacing-12);
   object-fit: cover;
 }
 
@@ -178,22 +176,23 @@
   align-items: stretch;
   flex-wrap: wrap;
   gap: var(--sigvelo-spacing-1);
-  width: 100%;
+  inline-size: 100%;
+  min-block-size: var(--sigvelo-spacing-8);
 }
 
 .prompt-input__textarea {
   flex: 1;
-  min-width: 8rem;
-  width: 100%;
+  min-inline-size: 8rem;
+  inline-size: 100%;
   padding: 0;
   border: none;
   background-color: transparent;
   color: var(--sigvelo-color-text);
   font-family: inherit;
-  font-size: var(--sigvelo-text-sm);
+  font-size: var(--sigvelo-density-compact-control-font-size);
   line-height: 1.5;
   resize: none;
-  overflow-y: hidden;
+  overflow-block: hidden;
 }
 
 .prompt-input__textarea::placeholder {
@@ -216,7 +215,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--sigvelo-spacing-2);
+  gap: var(--sigvelo-density-compact-control-gap);
   padding-block-start: var(--sigvelo-spacing-1);
 }
 
@@ -224,6 +223,7 @@
   display: inline-flex;
   align-items: center;
   gap: var(--sigvelo-spacing-1);
+  min-inline-size: 0;
 }
 
 .prompt-input__tools {
@@ -231,10 +231,12 @@
   align-items: center;
   gap: var(--sigvelo-spacing-1-5);
   flex-wrap: wrap;
-  min-height: var(--sigvelo-control-height-xs);
+  min-block-size: var(--sigvelo-control-height-xs);
 }
 
 .prompt-input__button {
+  --sigvelo-recipe-button-icon-size: var(--sigvelo-control-icon-size-md);
+
   gap: var(--sigvelo-spacing-1-5);
   color: var(--sigvelo-color-text-muted);
 }
@@ -268,15 +270,15 @@
 
 .prompt-input__dictation[data-listening] .prompt-input__dictation-icon::before {
   position: absolute;
-  inline-size: 1.75rem;
-  block-size: 1.75rem;
+  inline-size: var(--sigvelo-control-height-xs);
+  block-size: var(--sigvelo-control-height-xs);
   border: var(--sigvelo-border-width) solid currentColor;
-  border-radius: 999rem;
+  border-radius: var(--sigvelo-radius-full);
   opacity: calc(0.2 + var(--prompt-input-dictation-level) * 0.6);
-  transform: scale(calc(0.8 + var(--prompt-input-dictation-level) * 0.25));
+  scale: calc(0.8 + var(--prompt-input-dictation-level) * 0.25);
   transition:
     opacity 75ms linear,
-    transform 75ms linear;
+    scale 75ms linear;
   content: "";
 }
 
@@ -303,10 +305,10 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  margin-inline-start: 0.5rem;
+  margin-inline-start: var(--sigvelo-spacing-2);
   padding-block: 0.0625rem;
-  padding-inline: 0.25rem;
-  border: 1px solid color-mix(in oklab, currentColor, transparent 75%);
+  padding-inline: var(--sigvelo-spacing-1);
+  border: var(--sigvelo-border-width) solid color-mix(in oklab, currentColor, transparent 75%);
   border-radius: var(--sigvelo-radius-sm);
   font-family: var(--sigvelo-font-mono);
   font-size: 0.75em;
@@ -316,7 +318,7 @@
 
 .prompt-input__submit {
   flex-shrink: 0;
-  border-radius: 999rem;
+  border-radius: var(--sigvelo-radius-full);
 }
 
 .prompt-input__stop {
@@ -330,11 +332,11 @@
 }
 
 .prompt-input__action-menu {
-  min-width: 12rem;
+  min-inline-size: 12rem;
 }
 
 .prompt-input__action-menu-icon {
-  margin-inline-end: 0.5rem;
+  margin-inline-end: var(--sigvelo-spacing-2);
 }
 
 .prompt-input__permissions-trigger {
@@ -374,13 +376,13 @@
   white-space: nowrap;
 }
 
-@container prompt-input (max-width: 36rem) {
+@container prompt-input (inline-size <= 36rem) {
   .prompt-input__footer {
     gap: var(--sigvelo-spacing-1);
   }
 
   .prompt-input__tools {
-    min-width: 0;
+    min-inline-size: 0;
     flex-wrap: nowrap;
   }
 
@@ -406,7 +408,7 @@
   }
 
   .prompt-input__context-trigger {
-    max-width: 11rem;
+    max-inline-size: 11rem;
   }
 
   .prompt-input__context-category,
@@ -415,12 +417,25 @@
   }
 }
 
+@container prompt-input (inline-size <= 22rem) {
+  .prompt-input__context-trigger {
+    inline-size: var(--sigvelo-control-height-xs);
+    padding-inline: 0;
+    justify-content: center;
+    border-radius: var(--sigvelo-radius-full);
+  }
+
+  .prompt-input__context-value {
+    display: none;
+  }
+}
+
 .prompt-input__permissions-current-option:not([data-active]) {
   visibility: hidden;
 }
 
 .prompt-input__permissions-menu {
-  min-width: 17rem;
+  min-inline-size: 17rem;
 }
 
 .prompt-input__permissions-option {
@@ -431,15 +446,15 @@
   display: flex;
   flex-direction: column;
   gap: var(--sigvelo-spacing-0-5);
-  min-width: 0;
+  min-inline-size: 0;
 }
 
 .prompt-input__permissions-option-label {
-  font-size: var(--sigvelo-text-compact);
+  font-size: var(--sigvelo-density-compact-control-font-size);
 }
 
 .prompt-input__permissions-option-description {
-  font-size: var(--sigvelo-text-xs);
+  font-size: var(--sigvelo-density-compact-control-font-size);
   color: var(--sigvelo-color-text-muted);
 }
 
@@ -450,8 +465,8 @@
 }
 
 .prompt-input__permissions-check::before {
-  width: var(--sigvelo-spacing-2-5);
-  height: var(--sigvelo-spacing-1-5);
+  inline-size: var(--sigvelo-spacing-2-5);
+  block-size: var(--sigvelo-spacing-1-5);
   background-color: transparent;
   border-radius: 0;
   border-inline-start: 2px solid currentColor;
@@ -469,7 +484,7 @@
   z-index: 20;
   inset-block-start: calc(100% + var(--sigvelo-spacing-1-5));
   inset-inline-start: 0;
-  min-width: 14rem;
+  min-inline-size: 14rem;
   padding: var(--sigvelo-spacing-3);
   color: var(--sigvelo-color-text);
   background-color: var(--sigvelo-color-surface);
@@ -482,17 +497,18 @@
 .prompt-input__tab-label {
   margin: 0;
   color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-xs);
+  font-size: var(--sigvelo-density-compact-control-font-size);
   font-weight: var(--sigvelo-font-weight-semibold);
 }
 
 .prompt-input__tab-item {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  padding-block: 0.5rem;
-  padding-inline: var(--sigvelo-spacing-3);
-  font-size: var(--sigvelo-text-xs);
+  gap: var(--sigvelo-density-compact-control-gap);
+  min-block-size: var(--sigvelo-density-compact-control-height);
+  padding-block: var(--sigvelo-spacing-1);
+  padding-inline: var(--sigvelo-density-compact-control-padding-inline);
+  font-size: var(--sigvelo-density-compact-control-font-size);
 }
 
 .prompt-input__command-list {
@@ -501,16 +517,17 @@
 }
 
 .prompt-input__command-positioner {
-  width: min(var(--anchor-width), calc(100vw - var(--sigvelo-spacing-4)));
-  max-height: min(24rem, var(--available-height));
+  inline-size: min(var(--anchor-width), calc(100dvi - var(--sigvelo-spacing-4)));
+  max-block-size: min(24rem, var(--available-height));
 }
 
 .prompt-input__command-popup {
   --prompt-input-secondary-text: var(--sigvelo-color-text-muted);
 
-  width: 100%;
-  max-height: min(24rem, var(--available-height));
-  overflow: hidden auto;
+  inline-size: 100%;
+  max-block-size: min(24rem, var(--available-height));
+  overflow-inline: hidden;
+  overflow-block: auto;
 }
 
 .prompt-input__command-popup [data-slot="combobox-empty"]:empty {
@@ -519,7 +536,7 @@
 
 .prompt-input__command-item {
   align-items: center;
-  min-width: 0;
+  min-inline-size: 0;
 }
 
 .prompt-input__command-icon {
@@ -528,8 +545,8 @@
 }
 
 .prompt-input__command-icon > svg {
-  width: 1rem;
-  height: 1rem;
+  inline-size: var(--sigvelo-density-compact-control-icon-size);
+  block-size: var(--sigvelo-density-compact-control-icon-size);
 }
 
 .prompt-input__command-copy {
@@ -537,13 +554,13 @@
   grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: baseline;
   column-gap: var(--sigvelo-spacing-2);
-  min-width: 0;
+  min-inline-size: 0;
 }
 
 .prompt-input__context-option-copy {
   display: flex;
   flex-direction: column;
-  min-width: 0;
+  min-inline-size: 0;
 }
 
 .prompt-input__command-description {
@@ -554,7 +571,7 @@
 
 .prompt-input__command-meta {
   color: var(--prompt-input-secondary-text);
-  font-size: var(--sigvelo-text-compact);
+  font-size: var(--sigvelo-density-compact-control-font-size);
   white-space: nowrap;
 }
 
@@ -576,7 +593,7 @@
   padding-inline: var(--sigvelo-spacing-1);
   color: var(--sigvelo-color-primary-text);
   font-weight: inherit;
-  font-size: var(--sigvelo-text-base);
+  font-size: var(--sigvelo-density-compact-control-font-size);
 }
 
 .prompt-input__reference-icon,
@@ -587,7 +604,7 @@
 
 .prompt-input__reference-label {
   overflow: hidden;
-  max-width: 18rem;
+  max-inline-size: 18rem;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -605,20 +622,20 @@
   opacity: 1;
 }
 
-@container prompt-input (width < 28rem) {
+@container prompt-input (inline-size < 28rem) {
   .prompt-input__reference-label {
-    max-width: 12rem;
+    max-inline-size: 12rem;
   }
 }
 
 .prompt-input__command-description,
 .prompt-input__context-description {
   color: var(--prompt-input-secondary-text);
-  font-size: var(--sigvelo-text-compact);
+  font-size: var(--sigvelo-density-compact-control-font-size);
 }
 
 .prompt-input__context-trigger {
-  max-width: min(20rem, 45cqi);
+  max-inline-size: min(20rem, 45cqi);
 }
 
 .prompt-input__context-category,
@@ -644,8 +661,8 @@
 .prompt-input__context-menu {
   --prompt-input-secondary-text: var(--sigvelo-color-text-muted);
 
-  min-width: min(22rem, calc(100vw - var(--sigvelo-spacing-4)));
-  max-width: min(28rem, calc(100vw - var(--sigvelo-spacing-4)));
+  min-inline-size: min(22rem, calc(100dvi - var(--sigvelo-spacing-4)));
+  max-inline-size: min(28rem, calc(100dvi - var(--sigvelo-spacing-4)));
 }
 
 .prompt-input__context-option {

package/dist/styles/queue.css

@@ -1,8 +1,8 @@
 .queue {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
-  width: 100%;
+  gap: var(--sigvelo-spacing-2);
+  inline-size: 100%;
   font-family: inherit;
   color: var(--sigvelo-color-text);
 }
@@ -15,9 +15,10 @@
 .queue__section-trigger {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  padding-block: 0.4375rem;
-  padding-inline: 0.5rem;
+  gap: var(--sigvelo-spacing-2);
+  min-block-size: var(--sigvelo-control-height-xs);
+  padding-block: 0;
+  padding-inline: var(--sigvelo-control-padding-inline-xs);
   background-color: transparent;
   border: none;
   border-radius: var(--sigvelo-radius-sm);
@@ -30,8 +31,8 @@
   cursor: pointer;
   text-align: start;
   transition:
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .queue__section-trigger:hover:not([data-disabled]) {
@@ -46,33 +47,29 @@
 
 .queue__section-icon {
   display: inline-flex;
-  transition: transform var(--sigvelo-duration-medium) var(--sigvelo-ease-standard);
+  transition: rotate var(--sigvelo-motion-duration-disclosure) var(--sigvelo-motion-ease-change);
 }
 
 .queue__section-trigger[data-panel-open] .queue__section-icon {
-  transform: rotate(90deg);
+  rotate: 90deg;
 }
 
 .queue__section-label {
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
-}
-
-.queue__section-count {
-  /* Badge sm already sized appropriately */
+  gap: var(--sigvelo-spacing-2);
 }
 
 .queue__list {
-  margin-block: 0.5rem 0.25rem;
+  margin-block: var(--sigvelo-spacing-2) var(--sigvelo-spacing-1);
 }
 
 .queue__list-viewport {
-  max-height: 10rem;
+  max-block-size: 10rem;
 }
 
 .queue__list-scroll {
-  padding-inline-end: 1rem;
+  padding-inline-end: var(--sigvelo-spacing-4);
 }
 
 .queue__list-inner {
@@ -88,10 +85,11 @@
   display: flex;
   align-items: flex-start;
   gap: var(--sigvelo-spacing-2-5);
-  padding-block: 0.5rem;
-  padding-inline: 0.5rem;
+  padding-block: var(--sigvelo-spacing-2);
+  padding-inline: var(--sigvelo-spacing-2);
   border-radius: var(--sigvelo-radius-sm);
-  transition: background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+  transition: background-color var(--sigvelo-motion-duration-interaction)
+    var(--sigvelo-motion-ease-change);
 }
 
 .queue__item:hover {
@@ -116,12 +114,15 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 1rem;
-  height: 1rem;
+  inline-size: var(--sigvelo-control-icon-size-md);
+  block-size: var(--sigvelo-control-icon-size-md);
   margin-block-start: var(--sigvelo-spacing-0-5);
   border-radius: var(--sigvelo-radius-full);
   color: var(--sigvelo-color-text-muted);
   flex-shrink: 0;
+  transition:
+    color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .queue__item-indicator--active {
@@ -135,13 +136,17 @@
 
 .queue__item-content {
   flex: 1;
-  min-width: 0;
+  min-inline-size: 0;
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: var(--sigvelo-spacing-1);
   font-size: var(--sigvelo-text-sm);
   color: var(--sigvelo-color-text);
   line-height: 1.4;
+  transition:
+    color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    text-decoration-color var(--sigvelo-motion-duration-interaction)
+      var(--sigvelo-motion-ease-change);
 }
 
 .queue__item-description {
@@ -149,6 +154,10 @@
   font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
   line-height: 1.4;
+  transition:
+    color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    text-decoration-color var(--sigvelo-motion-duration-interaction)
+      var(--sigvelo-motion-ease-change);
 }
 
 .queue__item-description--complete {
@@ -159,10 +168,10 @@
 .queue__item-actions {
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
+  gap: var(--sigvelo-spacing-1);
   flex-shrink: 0;
   opacity: 0;
-  transition: opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+  transition: opacity var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .queue__item-actions:focus-within {
@@ -170,19 +179,19 @@
 }
 
 .queue__item-action {
-  min-width: 0;
+  min-inline-size: 0;
 }
 
 .queue__item-attachment {
   display: flex;
   align-items: center;
   gap: var(--sigvelo-spacing-1-5);
-  margin-block-start: 0.25rem;
+  margin-block-start: var(--sigvelo-spacing-1);
 }
 
 .queue__item-image {
-  width: 2.5rem;
-  height: 2.5rem;
+  inline-size: var(--sigvelo-control-height-lg);
+  block-size: var(--sigvelo-control-height-lg);
   object-fit: cover;
   border-radius: var(--sigvelo-radius-sm);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -193,14 +202,21 @@
   display: inline-flex;
   align-items: center;
   gap: var(--sigvelo-spacing-1-5);
-  padding-block: 0.3125rem;
-  padding-inline: 0.5rem;
+  min-block-size: var(--sigvelo-control-height-xs);
+  padding-block: 0;
+  padding-inline: var(--sigvelo-spacing-2);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   border-radius: var(--sigvelo-radius-sm);
   font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text);
 }
 
+@media (hover: none) {
+  .queue__item-actions {
+    opacity: 1;
+  }
+}
+
 .queue__item-file-icon {
   display: inline-flex;
   color: var(--sigvelo-color-text-muted);

package/dist/styles/radio.css

@@ -13,12 +13,14 @@
 }
 
 .radio {
+  --sigvelo-recipe-radio-size: var(--sigvelo-control-icon-size-lg);
+
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 1.125rem;
-  height: 1.125rem;
+  inline-size: var(--sigvelo-recipe-radio-size);
+  block-size: var(--sigvelo-recipe-radio-size);
   flex-shrink: 0;
   background-color: var(--sigvelo-color-canvas);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -27,10 +29,10 @@
   outline: none;
   cursor: pointer;
   transition:
-    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    box-shadow var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+    color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    border-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    box-shadow var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .radio:hover:not([data-disabled]) {
@@ -62,14 +64,19 @@
 
 .radio__indicator {
   display: block;
-  width: 0.5rem;
-  height: 0.5rem;
+  inline-size: var(--sigvelo-spacing-2);
+  block-size: var(--sigvelo-spacing-2);
   background-color: var(--sigvelo-color-primary-text-on-bg);
   border-radius: var(--sigvelo-radius-full);
-  transform: scale(0);
-  transition: transform var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+  opacity: 1;
+  scale: 1;
+  transition:
+    opacity var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    scale var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-enter);
 }
 
-.radio[data-checked] .radio__indicator {
-  transform: scale(1);
+.radio__indicator[data-starting-style],
+.radio__indicator[data-ending-style] {
+  opacity: 0;
+  scale: 0;
 }