@seed-design/css 1.2.7 → 1.2.8

package/recipes/chip-tabs.layered.css

@@ -99,25 +99,25 @@
     color: var(--seed-color-fg-neutral-inverted);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-chip-tabs__trigger--variant_neutralSolid:is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-neutral-weak-alpha-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-chip-tabs__trigger--variant_neutralSolid:is(:active, [data-active]) {
       background-color: var(--seed-color-bg-neutral-weak-alpha-pressed);
     }
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-chip-tabs__trigger--variant_neutralSolid:is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-neutral-inverted-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-chip-tabs__trigger--variant_neutralSolid:is([aria-selected="true"], [data-selected]):is(:active, [data-active]) {
       background-color: var(--seed-color-bg-neutral-inverted-pressed);
     }
@@ -145,25 +145,25 @@
     border-color: #0000;
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-chip-tabs__trigger--variant_neutralOutline:is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-transparent-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-chip-tabs__trigger--variant_neutralOutline:is(:active, [data-active]) {
       background-color: var(--seed-color-bg-transparent-pressed);
     }
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-chip-tabs__trigger--variant_neutralOutline:is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-neutral-inverted-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-chip-tabs__trigger--variant_neutralOutline:is([aria-selected="true"], [data-selected]):is(:active, [data-active]) {
       background-color: var(--seed-color-bg-neutral-inverted-pressed);
     }
@@ -189,25 +189,25 @@
     color: var(--seed-color-palette-static-white);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-chip-tabs__trigger--variant_brandSolid:is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-neutral-weak-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-chip-tabs__trigger--variant_brandSolid:is(:active, [data-active]) {
       background-color: var(--seed-color-bg-neutral-weak-pressed);
     }
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-chip-tabs__trigger--variant_brandSolid:is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-brand-solid-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-chip-tabs__trigger--variant_brandSolid:is([aria-selected="true"], [data-selected]):is(:active, [data-active]) {
       background-color: var(--seed-color-bg-brand-solid-pressed);
     }

package/recipes/chip.css

@@ -62,22 +62,22 @@
     background: var(--seed-color-bg-neutral-inverted);
     --seed-icon-color: var(--seed-color-fg-neutral-inverted);
 }
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .seed-chip__root--variant_solid:is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
         background: var(--seed-color-bg-neutral-weak-alpha-pressed);
     }
 }
-@media (hover: none) {
+@media not all and (hover: hover) and (pointer: fine) {
     .seed-chip__root--variant_solid:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
         background: var(--seed-color-bg-neutral-weak-alpha-pressed);
     }
 }
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .seed-chip__root--variant_solid:is(:checked, [data-checked]):is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
         background: var(--seed-color-bg-neutral-inverted-pressed);
     }
 }
-@media (hover: none) {
+@media not all and (hover: hover) and (pointer: fine) {
     .seed-chip__root--variant_solid:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
         background: var(--seed-color-bg-neutral-inverted-pressed);
     }
@@ -102,12 +102,12 @@
     box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
     --seed-icon-color: var(--seed-color-fg-neutral);
 }
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .seed-chip__root--variant_outlineStrong:is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
         background: var(--seed-color-bg-transparent-pressed);
     }
 }
-@media (hover: none) {
+@media not all and (hover: hover) and (pointer: fine) {
     .seed-chip__root--variant_outlineStrong:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
         background: var(--seed-color-bg-transparent-pressed);
     }
@@ -116,12 +116,12 @@
     background: var(--seed-color-bg-neutral-inverted);
     --seed-icon-color: var(--seed-color-fg-neutral-inverted);
 }
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .seed-chip__root--variant_outlineStrong:is(:checked, [data-checked]):is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
         background: var(--seed-color-bg-neutral-inverted-pressed);
     }
 }
-@media (hover: none) {
+@media not all and (hover: hover) and (pointer: fine) {
     .seed-chip__root--variant_outlineStrong:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
         background: var(--seed-color-bg-neutral-inverted-pressed);
     }
@@ -146,12 +146,12 @@
     box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
     --seed-icon-color: var(--seed-color-fg-neutral);
 }
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .seed-chip__root--variant_outlineWeak:is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
         background: var(--seed-color-bg-transparent-pressed);
     }
 }
-@media (hover: none) {
+@media not all and (hover: hover) and (pointer: fine) {
     .seed-chip__root--variant_outlineWeak:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
         background: var(--seed-color-bg-transparent-pressed);
     }
@@ -160,12 +160,12 @@
     background: var(--seed-color-bg-neutral-weak);
     box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-contrast);
 }
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .seed-chip__root--variant_outlineWeak:is(:checked, [data-checked]):is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
         background: var(--seed-color-bg-neutral-weak-pressed);
     }
 }
-@media (hover: none) {
+@media not all and (hover: hover) and (pointer: fine) {
     .seed-chip__root--variant_outlineWeak:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
         background: var(--seed-color-bg-neutral-weak-pressed);
     }

package/recipes/chip.layered.css

@@ -72,25 +72,25 @@
     --seed-icon-color: var(--seed-color-fg-neutral-inverted);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-chip__root--variant_solid:is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
       background: var(--seed-color-bg-neutral-weak-alpha-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-chip__root--variant_solid:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
       background: var(--seed-color-bg-neutral-weak-alpha-pressed);
     }
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-chip__root--variant_solid:is(:checked, [data-checked]):is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
       background: var(--seed-color-bg-neutral-inverted-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-chip__root--variant_solid:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
       background: var(--seed-color-bg-neutral-inverted-pressed);
     }
@@ -118,13 +118,13 @@
     --seed-icon-color: var(--seed-color-fg-neutral);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-chip__root--variant_outlineStrong:is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
       background: var(--seed-color-bg-transparent-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-chip__root--variant_outlineStrong:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
       background: var(--seed-color-bg-transparent-pressed);
     }
@@ -135,13 +135,13 @@
     --seed-icon-color: var(--seed-color-fg-neutral-inverted);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-chip__root--variant_outlineStrong:is(:checked, [data-checked]):is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
       background: var(--seed-color-bg-neutral-inverted-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-chip__root--variant_outlineStrong:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
       background: var(--seed-color-bg-neutral-inverted-pressed);
     }
@@ -169,13 +169,13 @@
     --seed-icon-color: var(--seed-color-fg-neutral);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-chip__root--variant_outlineWeak:is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
       background: var(--seed-color-bg-transparent-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-chip__root--variant_outlineWeak:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
       background: var(--seed-color-bg-transparent-pressed);
     }
@@ -186,13 +186,13 @@
     box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-contrast);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-chip__root--variant_outlineWeak:is(:checked, [data-checked]):is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
       background: var(--seed-color-bg-neutral-weak-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-chip__root--variant_outlineWeak:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
       background: var(--seed-color-bg-neutral-weak-pressed);
     }

package/recipes/contextual-floating-button.css

@@ -51,12 +51,12 @@
     --track-color: var(--seed-color-palette-gray-700);
     --range-color: var(--seed-color-fg-neutral-inverted);
 }
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .seed-contextual-floating-button--variant_solid:is(:hover, [data-hover]) {
         background: var(--seed-color-bg-neutral-inverted-pressed);
     }
 }
-@media (hover: none) {
+@media not all and (hover: hover) and (pointer: fine) {
     .seed-contextual-floating-button--variant_solid:is(:active, [data-active]) {
         background: var(--seed-color-bg-neutral-inverted-pressed);
     }
@@ -78,12 +78,12 @@
     --track-color: var(--seed-color-palette-gray-500);
     --range-color: var(--seed-color-fg-neutral);
 }
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .seed-contextual-floating-button--variant_layer:is(:hover, [data-hover]) {
         background: var(--seed-color-bg-layer-floating-pressed);
     }
 }
-@media (hover: none) {
+@media not all and (hover: hover) and (pointer: fine) {
     .seed-contextual-floating-button--variant_layer:is(:active, [data-active]) {
         background: var(--seed-color-bg-layer-floating-pressed);
     }

package/recipes/contextual-floating-button.layered.css

@@ -57,13 +57,13 @@
     --range-color: var(--seed-color-fg-neutral-inverted);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-contextual-floating-button--variant_solid:is(:hover, [data-hover]) {
       background: var(--seed-color-bg-neutral-inverted-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-contextual-floating-button--variant_solid:is(:active, [data-active]) {
       background: var(--seed-color-bg-neutral-inverted-pressed);
     }
@@ -89,13 +89,13 @@
     --range-color: var(--seed-color-fg-neutral);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-contextual-floating-button--variant_layer:is(:hover, [data-hover]) {
       background: var(--seed-color-bg-layer-floating-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-contextual-floating-button--variant_layer:is(:active, [data-active]) {
       background: var(--seed-color-bg-layer-floating-pressed);
     }

package/recipes/dialog.layered.css

@@ -2,7 +2,7 @@
   .seed-dialog__positioner {
     overscroll-behavior-y: none;
     --dialog-z-index: 2;
-    z-index: calc(var(--dialog-z-index)  + var(--layer-index, 0));
+    z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
     justify-content: center;
     align-items: center;
     display: flex;
@@ -12,7 +12,7 @@
 
   .seed-dialog__backdrop {
     background: var(--seed-color-bg-overlay);
-    z-index: calc(var(--dialog-z-index)  + var(--layer-index, 0));
+    z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
     position: fixed;
     inset: 0;
   }
@@ -20,7 +20,7 @@
   .seed-dialog__content {
     box-sizing: border-box;
     word-break: break-all;
-    z-index: calc(var(--dialog-z-index)  + var(--layer-index, 0));
+    z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
     background: var(--seed-color-bg-layer-floating);
     max-width: 272px;
     margin: auto var(--seed-dimension-x8);

package/recipes/extended-action-sheet.layered.css

@@ -2,7 +2,7 @@
   .seed-extended-action-sheet__positioner {
     overscroll-behavior-y: none;
     --sheet-z-index: 2;
-    z-index: calc(var(--sheet-z-index)  + var(--layer-index, 0));
+    z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
     justify-content: center;
     align-items: flex-end;
     display: flex;
@@ -12,7 +12,7 @@
 
   .seed-extended-action-sheet__backdrop {
     background: var(--seed-color-bg-overlay);
-    z-index: calc(var(--sheet-z-index)  + var(--layer-index, 0));
+    z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
     position: fixed;
     inset: 0;
   }
@@ -41,7 +41,7 @@
   .seed-extended-action-sheet__content {
     box-sizing: border-box;
     word-break: break-all;
-    z-index: calc(var(--sheet-z-index)  + var(--layer-index, 0));
+    z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
     background: var(--seed-color-bg-layer-floating);
     padding-inline: var(--seed-dimension-spacing-x-global-gutter);
     padding-block: var(--seed-dimension-x4);

package/recipes/field.layered.css

@@ -31,7 +31,7 @@
     --seed-prefix-icon-size: var(--seed-dimension-x4);
     --seed-prefix-icon-color: var(--seed-color-fg-neutral-subtle);
     --seed-prefix-icon-margin-right: var(--seed-dimension-x1_5);
-    --seed-prefix-icon-margin-top: calc((var(--seed-line-height-t4)  - var(--seed-dimension-x4)) / 2);
+    --seed-prefix-icon-margin-top: calc((var(--seed-line-height-t4) - var(--seed-dimension-x4)) / 2);
     display: flex;
   }
 
@@ -43,7 +43,7 @@
     --seed-prefix-icon-size: var(--seed-dimension-x4);
     --seed-prefix-icon-color: var(--seed-color-fg-critical);
     --seed-prefix-icon-margin-right: var(--seed-dimension-x1_5);
-    --seed-prefix-icon-margin-top: calc((var(--seed-line-height-t4)  - var(--seed-dimension-x4)) / 2);
+    --seed-prefix-icon-margin-top: calc((var(--seed-line-height-t4) - var(--seed-dimension-x4)) / 2);
     display: flex;
   }
 

package/recipes/floating-action-button.css

@@ -32,12 +32,12 @@
     font-weight: var(--seed-font-weight-bold);
     transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), max-width var(--seed-duration-d4) var(--seed-timing-function-easing), height var(--seed-duration-d4) var(--seed-timing-function-easing), padding var(--seed-duration-d4) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
 }
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .seed-floating-action-button__root:is(:hover, [data-hover]) {
         background: var(--seed-color-bg-brand-solid-pressed);
     }
 }
-@media (hover: none) {
+@media not all and (hover: hover) and (pointer: fine) {
     .seed-floating-action-button__root:is(:active, [data-active]) {
         background: var(--seed-color-bg-brand-solid-pressed);
     }

package/recipes/floating-action-button.layered.css

@@ -37,13 +37,13 @@
     overflow: hidden;
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-floating-action-button__root:is(:hover, [data-hover]) {
       background: var(--seed-color-bg-brand-solid-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-floating-action-button__root:is(:active, [data-active]) {
       background: var(--seed-color-bg-brand-solid-pressed);
     }

package/recipes/help-bubble.layered.css

@@ -1,7 +1,7 @@
 @layer seed-components {
   .seed-help-bubble__positioner {
     --popover-z-index: 99;
-    z-index: calc(var(--popover-z-index)  + var(--z-index-offset, 0));
+    z-index: calc(var(--popover-z-index) + var(--z-index-offset, 0));
   }
 
   .seed-help-bubble__content {
@@ -80,10 +80,10 @@
   .seed-help-bubble__closeButton {
     cursor: pointer;
     padding: calc((38px - var(--seed-dimension-x3_5)) / 2);
-    margin-left: calc(var(--seed-dimension-x1)  - ((38px - var(--seed-dimension-x3_5)) / 2));
+    margin-left: calc(var(--seed-dimension-x1) - ((38px - var(--seed-dimension-x3_5)) / 2));
     margin-right: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2));
-    margin-top: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2)  + var(--seed-dimension-x0_5));
-    margin-bottom: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2)  + var(--seed-dimension-x0_5));
+    margin-top: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2) + var(--seed-dimension-x0_5));
+    margin-bottom: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2) + var(--seed-dimension-x0_5));
     color: var(--seed-color-fg-neutral-inverted);
     --seed-icon-size: var(--seed-dimension-x3_5);
     --seed-icon-color: var(--seed-color-fg-neutral-inverted);

package/recipes/image-frame-reaction-button.layered.css

@@ -15,10 +15,10 @@
 
   .seed-image-frame-reaction-button__root:before {
     content: "";
-    top: calc((var(--seed-dimension-x10)  - var(--seed-dimension-x6)) / 2 * -1);
-    right: calc((var(--seed-dimension-x10)  - var(--seed-dimension-x6)) / 2 * -1);
-    bottom: calc((var(--seed-dimension-x10)  - var(--seed-dimension-x6)) / 2 * -1);
-    left: calc((var(--seed-dimension-x10)  - var(--seed-dimension-x6)) / 2 * -1);
+    top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
+    right: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
+    bottom: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
+    left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
     outline: var(--seed-dimension-x0_5) solid transparent;
     outline-offset: calc(var(--seed-dimension-x0_5) * -1);
     transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);

package/recipes/image-frame.css

@@ -1,18 +1,24 @@
 .seed-image-frame__root {
     position: relative;
     overflow: hidden;
-    border-radius: inherit
+    border-radius: inherit;
 }
 .seed-image-frame__content {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
-    border-radius: inherit
+    border-radius: inherit;
+}
+.seed-image-frame__content:not([data-loading-state='loaded']) {
+    display: none;
 }
 .seed-image-frame__fallback {
     width: 100%;
-    height: 100%
+    height: 100%;
+}
+.seed-image-frame__fallback[data-loading-state='loaded'] {
+    display: none;
 }
 .seed-image-frame__root--stroke_true::after {
     content: '';
@@ -23,8 +29,8 @@
     bottom: 0;
     pointer-events: none;
     border-radius: inherit;
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle)
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle);
 }
 .seed-image-frame__root--rounded_true {
-    border-radius: var(--seed-radius-r2)
+    border-radius: var(--seed-radius-r2);
 }

package/recipes/image-frame.layered.css

@@ -13,11 +13,19 @@
     display: block;
   }
 
+  .seed-image-frame__content:not([data-loading-state="loaded"]) {
+    display: none;
+  }
+
   .seed-image-frame__fallback {
     width: 100%;
     height: 100%;
   }
 
+  .seed-image-frame__fallback[data-loading-state="loaded"] {
+    display: none;
+  }
+
   .seed-image-frame__root--stroke_true:after {
     content: "";
     pointer-events: none;

package/recipes/inline-banner.layered.css

@@ -10,7 +10,7 @@
     padding-block: var(--seed-dimension-x2_5);
     --seed-prefix-icon-size: var(--seed-dimension-x4);
     --seed-prefix-icon-margin-right: var(--seed-dimension-x2);
-    --seed-prefix-icon-margin-top: calc((var(--seed-dimension-x10)  - var(--seed-dimension-x4)) * .5 - var(--seed-dimension-x2_5));
+    --seed-prefix-icon-margin-top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * .5 - var(--seed-dimension-x2_5));
     --seed-suffix-icon-size: var(--seed-dimension-x4);
     --seed-suffix-icon-margin-left: var(--seed-dimension-x4);
     --seed-suffix-icon-align-self: center;
@@ -67,8 +67,8 @@
   .seed-inline-banner__closeButton {
     width: var(--seed-dimension-x10);
     height: var(--seed-dimension-x10);
-    margin: calc((var(--seed-dimension-x10)  - var(--seed-dimension-x4)) * -.5);
-    margin-left: calc((var(--seed-dimension-x10)  - var(--seed-dimension-x4)) * -.5 + var(--seed-dimension-x4));
+    margin: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5);
+    margin-left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5 + var(--seed-dimension-x4));
     --seed-suffix-icon-margin-left: initial;
     cursor: pointer;
     background-color: #0000;

package/recipes/input-button.css

@@ -43,12 +43,12 @@
     cursor: not-allowed;
     background-color: var(--seed-color-bg-disabled);
 }
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .seed-input-button__button:not([data-disabled]):not(:is([data-readonly])):is(:hover, [data-hover]) {
         background-color: var(--seed-color-bg-transparent-pressed);
     }
 }
-@media (hover: none) {
+@media not all and (hover: hover) and (pointer: fine) {
     .seed-input-button__button:not([data-disabled]):not(:is([data-readonly])):is(:active, [data-active]) {
         background-color: var(--seed-color-bg-transparent-pressed);
     }

package/recipes/input-button.layered.css

@@ -40,13 +40,13 @@
     background-color: var(--seed-color-bg-disabled);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-input-button__button:not([data-disabled]):not([data-readonly]):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-transparent-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-input-button__button:not([data-disabled]):not([data-readonly]):is(:active, [data-active]) {
       background-color: var(--seed-color-bg-transparent-pressed);
     }

package/recipes/list-item.css

@@ -93,7 +93,7 @@
     transition-duration: var(--seed-duration-color-transition);
     transition-timing-function: var(--seed-timing-function-easing);
 }
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .seed-list-item__content:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover])::before {
         background-color: var(--seed-color-bg-transparent-pressed);
         left: var(--seed-dimension-x1_5);
@@ -101,7 +101,7 @@
         border-radius: var(--list-item-border-radius, var(--seed-dimension-x2_5));
     }
 }
-@media (hover: none) {
+@media not all and (hover: hover) and (pointer: fine) {
     .seed-list-item__content:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active])::before {
         background-color: var(--seed-color-bg-transparent-pressed);
         left: var(--seed-dimension-x1_5);
@@ -109,7 +109,7 @@
         border-radius: var(--list-item-border-radius, var(--seed-dimension-x2_5));
     }
 }
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .seed-list-item__content:not(:is(:disabled, [disabled], [data-disabled]))[data-hover]::before {
         background-color: var(--seed-color-bg-transparent-pressed);
         left: var(--seed-dimension-x1_5);
@@ -117,7 +117,7 @@
         border-radius: var(--list-item-border-radius, var(--seed-dimension-x2_5));
     }
 }
-@media (hover: none) {
+@media not all and (hover: hover) and (pointer: fine) {
     .seed-list-item__content:not(:is(:disabled, [disabled], [data-disabled]))[data-active]::before {
         background-color: var(--seed-color-bg-transparent-pressed);
         left: var(--seed-dimension-x1_5);
@@ -147,22 +147,22 @@
 .seed-list-item__content--highlighted_true::before {
     background-color: var(--seed-color-bg-brand-weak);
 }
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .seed-list-item__content--highlighted_true:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover])::before {
         background-color: var(--seed-color-bg-brand-weak-pressed);
     }
 }
-@media (hover: none) {
+@media not all and (hover: hover) and (pointer: fine) {
     .seed-list-item__content--highlighted_true:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active])::before {
         background-color: var(--seed-color-bg-brand-weak-pressed);
     }
 }
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .seed-list-item__content--highlighted_true:not(:is(:disabled, [disabled], [data-disabled]))[data-hover]::before {
         background-color: var(--seed-color-bg-brand-weak-pressed);
     }
 }
-@media (hover: none) {
+@media not all and (hover: hover) and (pointer: fine) {
     .seed-list-item__content--highlighted_true:not(:is(:disabled, [disabled], [data-disabled]))[data-active]::before {
         background-color: var(--seed-color-bg-brand-weak-pressed);
     }